遍历对象并将属性附加到 html 文件

Question

嗨，我是 JavaScript 的新手，一直在练习一些东西。我正在努力循环遍历对象的属性并将每个属性附加到 DOM。有人可以提供一些指导吗？我尝试通过其他问题将其拼凑在一起，但不确定我哪里出错了？

var person = {
    firstName: "john",
    lastName: "doe",
    age: 45,
    placeOfBirth: "somewhere"
}

for(var i = 0; i < person.length; i++) {
    if(hasOwnProperty(person[i])) {
        var p = document.createElement("p");
        p.innerHTML = person[i];
        document.body.appendChild(p)
    }
}

Answer 1

而且您不需要 person.hasOwnProperty(key)，因为密钥只有属性。因此，无论您是否使用 if 条件，它都将始终为真。

var person = {
    firstName: "john",
    lastName: "doe",
    age: 45,
    placeOfBirth: "somewhere"
}

for(var key in person) {
    
        var p = document.createElement("p");
        p.innerHTML = person[key];
        document.body.appendChild(p)
    
}

Answer 2

您正在将 person 视为一个数组。物体没有长度。使用for in迭代对象属性

尝试：

var person = {
    firstName: "john",
    lastName: "doe",
    age: 45,
    placeOfBirth: "somewhere"
}

for(key in person) {
    if(person.hasOwnProperty(key)) {
        var p = document.createElement("p");
        p.innerHTML = person[key];
        document.body.appendChild(p)
    }
}

另请注意 hasOwnProperty()

的更正用法

DEMO

Answer 3

您要找的是：

for(var i in person){
    if(person.hasOwnProperty(i)){
        var p = document.createElement("p");
        p.innerHTML = person[i];
        document.body.appendChild(p);
    }
}

但是，因为 i in person 指的是对象中的任何东西，我们可以完全删除 if(person.hasOwnProperty(i)) 因为它总是有属性.

您可能还想考虑使用密钥名称，因为这只会附加值，而不会对与其关联的密钥执行任何操作。

尝试添加：

p.innerHTML = i + ': ' + person[i];

这应该为每个段落元素生成一个 "Key: value" 输出。

遍历对象并将属性附加到 html 文件

Loop through an object and append the properties to an html file

javascript

for-loop

appendchild