如何在控制檯等html元素中顯示對象？

我想在一個名爲「demo」的段落中顯示整個對象，並且我希望該對象的顯示方式類似於它在控制檯中的顯示方式。但是，它不會在段落內返回「[object object]」。有沒有一種方法來顯示它像段落內的console.log方法？
這裏是我的代碼：如何在控制檯等html元素中顯示對象？

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

來源

2016-02-21 Sadegh Shaikhi

嘗試JSON.stringify，雖然此方法將剝離功能。 –

你可以stringify整個對象，而不是通過每個鍵/值對循環和將結果放在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

來源

2016-02-21 14:19:10 Andy

嘗試使用這樣的：

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

來源

2016-02-21 14:11:16

也許這會有所幫助：

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。而且這樣做更好，因爲當你調用「document.getElementById（」demo「）。innerHTML = html;」時，你將html緩存在一個字符串中，並且只與DOM交互一次。

祝你好運！

來源

2016-02-21 14:21:37

如何在控制檯等html元素中顯示對象？

回答

相關問題