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

【问题标题】：Displaying List Of JavaScript Objects As HTML List Items将 JavaScript 对象列表显示为 HTML 列表项
【发布时间】：2016-05-08 14:52:51
【问题描述】：

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

【问题讨论】：

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

标签： javascript html object for-loop html-lists

【解决方案1】：

嗯，你有几个问题（<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);

【讨论】：

【解决方案2】：

删除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;
  }
}

希望这会有所帮助:)

【讨论】：

【解决方案3】：

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

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>

我确信它可以重构，但在视觉上它可以工作。

【讨论】：

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

【解决方案4】：

这种将这种数据格式呈现为 HTML 的动态方式

const elList = document.getElementById('aaron-family')

function convertObjectsToArrayOfObjects(family) {
    const filteredData = []
    for(person in family){
          filteredData.push(family[person])
     }
    return filteredData;
 }

function elList(family) {
   const familyData = convertObjectsToArrayOfObjects(family)
   elList.innerHTML = `
      ${
        familyData.map(person => {
          return `
            <h1>name: ${person.name}</h1>
            <h2>age: ${person.age}</h2>
          `   
       })
     }
  `
}

list(family);

【讨论】：

【解决方案5】：

只是你不需要定义函数

html 文件：

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

for (var prop in family) {

    document.getElementById('aaron-family').innerHTML += '<li>' + prop + '</li>';

}

<html>
    <head>
        <title>Aaron's Test With Objects</title>
    </head>
    <body>

        <ul id="aaron-family">
        </ul>
        <script src="objects.js" type="text/javascript"></script>

    </body>
</html>

【讨论】：