发表新帖
发表新帖

Displaying List Of JavaScript Objects As HTML List Items

前端 未结
关注
5 1060
野趣味
野趣味 2021-01-23 17:58

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: {
    n
相关标签:
5条回答
  • 逝去的感伤
    2021-01-23 18:23

    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)
  • 不知归路
    2021-01-23 18:24

    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)
  • 再見小時候
    2021-01-23 18:31

    Just you don't need to define function

    html file:

    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>

    0 讨论(0)
  • 猫巷女王i
    2021-01-23 18:41

    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)
  • 栀梦
    2021-01-23 18:48

    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)
 看不清?
提交回复
热议问题