How to show objects inside html elements like console?

Question

I wanna show the whole object inside a paragraph called \"demo\", and i want the object to be shown similar to the way that it will be in the console. But instead of that it ret

Answer 1

Try and use this:

document.getElementById("demo").innerHTML = JSON.stringify(obj[x])

Answer 2

You can just stringify the whole object rather than looping through each key/value pair and put the result in a pre element:

function func(obj) {

  // null refers to an optional replacer function which we won't
  // use in this instance. 2 is an optional parameter to set the 
  // indentation, in this case 2 spaces
  var json = JSON.stringify(obj, null, 2);
  document.getElementById("demo").innerHTML = json;
};

OUTPUT

{
  "subobj": {
    "prop1": "value1",
    "prop2": "value2",
    "prop3": "value3"
  }
}

DEMO

Answer 3

Maybe this helps:

var obj = {"objects":[
    {"prop1": "obj1 value1", "prop2": "obj1 value2"},
    {"prop1": "obj 2 value1", "prop2": "obj2 value2"}
]};

function func() {
    var html = "";
    for (var i=0; i < obj.objects.length; i++) {
            // i want it to be shown like the console.log method
            // console.log(obj[x])
        html += "<p>" + obj.objects[i].prop1 + obj.objects[i].prop2  + "</p>";

        }

    document.getElementById("demo").innerHTML = html;
    }
func();

You used "obj[x]", but you don't have an array of objects in your obj. And also this is better because you cache the html in a string and only interact with the DOM once, when you call "document.getElementById("demo").innerHTML = html;".

Good luck!