Displaying List Of JavaScript Objects As HTML List

2019-03-02 16:18发布

站内问答 / JavaScript
1863 4 5

When I attempt this, the HMTL page only displays the last object, instead of all the objects.

Here is my JavaScript file

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);

And here's my HTML file

<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>

4条回答
做自己的国王
2楼-- · 2019-03-02 16:49

Thank you guys! Here's the final solution I came up with:

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>

I'm sure it can be refactored but it works, visually.

查看更多
0人赞 添加讨论(0) 举报
狗以群分
3楼-- · 2019-03-02 16:52

Well, you've got a couple problems there (<li> tag without a parent <ol> or <ul> tag, among others)...but I'd say the primary error is that you are replacing each subsequent output with each assignment to innerHTML.

Solution: assign a compiled array to innerHTML (using join to include spaces between the values)

var list = function(family) {
  var names = [];
  for (var prop in family) {
    names.push(prop.name);
  }
  document.getElementById('aaron-family').innerHTML = names.join(' ');
}
list(family);
查看更多
0人赞 添加讨论(0) 举报
Bombasti
4楼-- · 2019-03-02 16:58

Remove elList because there is no point in having it...

Then change 

document.getElementById('aaron-family').innerHTML = prop;

To

document.getElementById('aaron-family').innerHTML += prop;

That way you are not constantly setting the innherHTML to prop. Also, you might find it better to change the function to the following in order to prevent from constantly getting the element.

function list(family) {
  var elList = document.getElementById('aaron-family');
  for (var prop in family) {
    elList.innerHTML += prop;
  }
}

Hope this helps:)

查看更多
0人赞 添加讨论(0) 举报
虎瘦雄心在
5楼-- · 2019-03-02 17:04

This dynamic way to render like this data format into 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);
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)