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

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