Question

我正在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>

Answer 1

但它不是打印出所选对象的细节只需打印＆＃34; [对象]＆＃34;，

这是因为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 ;

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

Answer 3

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

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

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

Answer 4

您必须在字符串中转换对象。请参阅以下代码：

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

Answer 5

它是一个JSON数组。要打印JSON数组，您需要使用JSON.stringify

boost::container::set

或者如果你想打印Firstname，lastname和phonenumber separetly你需要使用如下所示的数组索引获取key的值。

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

Answer 6

当您尝试显示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]);

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

6 个答案: