问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

当我尝试这样做时，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>

原文由 Aaron Kantrowitz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascripthtmlobjectfor-loophtml-lists
阅读 306
1 个回答
得票最新
社区维基
1

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

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>

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

原文由 Aaron Kantrowitz 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题