将JavaScript对象列表显示为HTML列表项

当我尝试这样做时，HMTL页面只显示最后一个对象，而不是所有对象。将JavaScript对象列表显示为HTML列表项

这里是我的JavaScript文件

var family = { 
    aaron: { 
    name: 'Aaron', 
    age: 30 
    }, 
    megan: { 
    name: 'Megan', 
    age: 40 
    }, 
    aaliyah: { 
    name: 'Aaliyah', 
    age: 2 
    } 
} 

var list = function(family) { 
    for (var prop in family) { 
    var elList = document.getElementById('aaron-family').innerHTML = prop; 
    } 
} 

list(family);

这是我的HTML文件

<html> 
<head> 
    <title>Aaron's Test With Objects</title> 
</head> 
    <li id="aaron-family">Hey, this is where it goes</li> 
<footer> 
    <script src="objects.js"></script> 
</footer> 
</html>

来源

2016-01-31 Aaron Kantrowitz

您需要将新项目追加到列表中。 –

嗯，你已经得到了几个问题有（<li>标签没有父母<ol>或<ul>标签中其他人）......但我想说的主要错误是，你将每个后续输出替换为innerHTML。

解决方案：分配一个已编译的阵列innerHTML（使用join以包括值之间的空间）

var list = function(family) { 
    var names = []; 
    for (var prop in family) { 
    names.push(prop.name); 
    } 
    document.getElementById('aaron-family').innerHTML = names.join(' '); 
} 
list(family);

来源

2016-01-31 00:14:13 sfletche

删除

elList因为在具有它没有点...

然后改变

document.getElementById('aaron-family').innerHTML = prop;

去

document.getElementById('aaron-family').innerHTML += prop;

这样，你不是经常将innherHTML设置为prop。另外，为了防止不断获取元素，您可能会发现将函数更改为以下内容会更好。

function list(family) { 
    var elList = document.getElementById('aaron-family'); 
    for (var prop in family) { 
    elList.innerHTML += prop; 
    } 
}

希望这有助于:)

来源

2016-01-31 00:18:09 tkellehe

谢谢你们！这是我想出了一个最终的解决方案：

var family = { 
    aaron: { 
    name: 'Aaron', 
    age: 30 
    }, 
    megan: { 
    name: 'Megan', 
    age: 40 
    }, 
    aaliyah: { 
    name: 'Aaliyah', 
    age: 2 
    } 
} 

var list = function(family) { 
    for (var prop in family) { 
    document.getElementById('aaron-family').innerHTML += '<li>' + prop + '</li>'; 
    console.log(prop); 
    } 
}

HTML

<html> 
<head> 
    <title>Aaron's Test With Objects</title> 
</head> 
<ul id="aaron-family"> 
</ul> 
<footer> 
    <script src="objects.js"></script> 
</footer> 
</html>

我敢肯定，它可以进行重构，但它的工作原理，在视觉上。

来源

2016-01-31 00:29:55

您可能希望将'document.getElementById'移到for循环之外，因为每个循环都在为该id做一个查询:) – tkellehe

将JavaScript对象列表显示为HTML列表项

回答

相关问题