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

Question

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

这是我的代码:

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

Answer 1

but it instead of printing out the details of the chosen object, it just prints "[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 ;