Aar*_*itz 3 html javascript for-loop object html-lists
当我尝试这样做时，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>
我确信它可以重构，但它在视觉上有效。