gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 04:49:49 27 4
gpt4 key购买 nike

当我尝试这样做时,HMTL 页面只显示最后一个对象,而不是所有对象。

这是我的 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>

最佳答案

谢谢大家!这是我想出的最终解决方案:

JS

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>

我确信它可以重构,但它在视觉上是有效的。

关于javascript - 将 JavaScript 对象列表显示为 HTML 列表项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35108777/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com