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

Question

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

3

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

- Aaron Kantrowitz

你需要将新项目添加到列表中。 - PM 77-1

5个回答

3

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

- sfletche

1

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

希望这能帮到您 :)

- tkellehe

1

这是一种将数据格式呈现为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);

- Mohammed

0

只需不定义函数

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>

- Ebrahim Amini Sharifi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Aaron Kantrowitz · Accepted Answer

谢谢大家！这是我想出来的最终解决方案：

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>

我相信它可以进行重构，但它在视觉上能够正常运作。