如何在控制台等 html 元素内显示对象？

Question

我想在名为 "demo" 的段落中显示整个对象，我希望该对象的显示方式类似于它在控制台中的显示方式。但不是它 returns "[object object]" 在段落中。有没有办法像段落中的 console.log 方法一样显示它？
这是我的代码：

var obj = {
  subobj: {prop1: "value1", prop2: "value2", prop3: "value3"},
};

var var1 = "subobj";

function func() {
  for (x in obj) {
    if (var1 == x) {
      // i want it to be shown like the console.log method
      // console.log(obj[x])
      document.getElementById("demo").innerHTML = obj[x];
    }
  }
};

func()

Answer 1

尝试使用这个：

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

Answer 2

您可以 stringify 整个对象，而不是遍历每个 key/value 对并将结果放入 pre 元素中：

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;
};

输出

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

DEMO

Answer 3

也许这有帮助：

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();

您使用了 "obj[x]"，但您的 obj 中没有对象数组。这也更好，因为您将 html 缓存在一个字符串中，并且只与 DOM 交互一次，当您调用 "document.getElementById("demo").innerHTML = html;" .

祝你好运！

如何在控制台等 html 元素内显示对象？

How to show objects inside html elements like console?

javascript

object

console.log