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

【问题标题】：How to print object values correctly to a DIV using innerHTML?如何使用 innerHTML 将对象值正确打印到 DIV？
【发布时间】：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
将某些内容记录到控制台和将某些内容转换为字符串不是一回事。

标签： javascript html object key innerhtml

【解决方案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>

【讨论】：