如何使用 innerHTML 将对象值正确打印到 DIV？

Posted 2023-05-07

【中文标题】如何使用 innerHTML 将对象值正确打印到 DIV？

【英文标题】：How to print object values correctly to a DIV using innerHTML?

【发布时间】：2016-10-25 07:42:55

【问题描述】：

我正在 Codecademy 上一门课程，他们的许多初学者课程都使用 console.log() 命令打印到控制台。但是我想尝试使用 document.GetElementById() 和 innerHTML 但它不是打印出所选对象的详细信息，而是打印“[object Object]” ，而 console.log() 打印密钥的详细信息？

这是我的代码：

<div id="myfrndDetails"></div>

<script>
var frnds = new Object();
frnds.bill = 
    firstName: "Bill",
    lastName: "Gates",
    phoneNumber: "8778787"


frnds.steve = 
    firstName: "Bill",
    lastName: "Gates",
    phoneNumber: "8778787"



var frndCard = function(frndName,frndLst) 
    for (var onefrnd in frndLst) 
        if (frndLst[onefrnd].firstName === frndName) 
            document.getElementById("myfrndDetails").innerhtml = frndLst[onefrnd];
            return frndLst[onefrnd];
        
    
;

frndCard("Bill",frnds);

</script>

【问题讨论】：

只使用 JSON.stringify

将某些内容记录到控制台和将某些内容转换为字符串不是一回事。

【参考方案1】：

但它不是打印出所选对象的详细信息，而是 只打印“[object Object]”，

这是因为 frndLst[onefrnd] 是一个对象，其toString 方法将打印[object Object]。

使用JSON.stringify(frndLst[onefrnd]) 来查看此对象的 JSON 表示

或者，替换这一行

document.getElementById("myfrndDetails").innerHTML = frndLst[onefrnd];

通过

document.getElementById("myfrndDetails").innerHTML = "lastname - " +  frndLst[onefrnd].lastName + " and phoneNumber " + frndLst[onefrnd].phoneNumber ;

【讨论】：

谢谢。那很完美。您的最后一个选项完全符合我的下一个问题。非常感谢。

不过只有一个问题。如果使用您建议的第三种解决方案，您还会使用 return frndLst[oneFrnd] 吗？那不是只存储 JSON 对象吗？

是的，这将简单地返回对象。

【参考方案2】：

像这样改变你的功能：

var frndCard = function(frndName,frndLst) 
    for (var onefrnd in frndLst) 
        
        if (frndLst[onefrnd].firstName === frndName) 
            var output = '';
            for (property in frndLst[onefrnd]) 
                output += property + ': ' + frndLst[onefrnd][property]+"; <br>\n";
              
            document.getElementById("myfrndDetails").innerHTML = output;
            return frndLst[onefrnd];
        
    
;

【讨论】：

发挥了作用。谢谢玛丽亚。

【参考方案3】：

您可以使用JSON.stringify 将其打印为string，如下所示：

这将按原样打印整个对象：

 document.getElementById("myfrndDetails").innerHTML = JSON.stringify(frndLst[onefrnd]);

【参考方案4】：

这是一个 JSON 数组。要打印 JSON 数组，您必须使用 JSON.stringify

 document.getElementById("myfrndDetails").innerHTML = JSON.stringify(frndLst[onefrnd]);

或者如果你想分别打印名字、姓氏和电话号码，你需要使用下面的数组索引来获取键的值。

document.getElementById("myfrndDetails").innerHTML = "lastname - " +  frndLst[onefrnd].lastName + " and phoneNumber " + frndLst[onefrnd].phoneNumber ;

【参考方案5】：

当您尝试显示 frndLst[onefrnd]; 时，您实际上是在请求您正在打印的对象的 toString() 表示。

你可以在这里找到上面的一些信息：

https://developer.mozilla.org/en/docs/Web/javascript/Reference/Global_Objects/Object/toString

我个人建议构建你自己的函数来执行对象的漂亮打印，或者使用 JSON 的 stringify 功能去实现对象的基本字符串表示。

document.getElementById("myfrndDetails").innerHTML = JSON.stringify(frndLst[onefrnd]);

【参考方案6】：

您必须将对象转换为字符串。 见以下代码：

 <div id="myfrndDetails"></div>

<script>
var frnds = new Object();
frnds.bill = 
    firstName: "Bill",
    lastName: "Gates",
    phoneNumber: "8778787"


frnds.steve = 
    firstName: "Bill",
    lastName: "Gates",
    phoneNumber: "8778787"



var frndCard = function(frndName,frndLst) 
    for (var onefrnd in frndLst) 
        if (frndLst[onefrnd].firstName === frndName) 
            document.getElementById("myfrndDetails").innerHTML = JSON.stringify(frndLst[onefrnd]);

            console.log(frndLst[onefrnd]); 
            //will print  Object  firstName="Bill", lastName="Gates", phoneNumber="8778787"

            //return frndLst[onefrnd];
            // this will return [object Object]

            return JSON.stringify(frndLst[onefrnd]);
            // will print "firstName":"Bill","lastName":"Gates","phoneNumber":"8778787"
        
    
;

frndCard("Bill",frnds);

</script>