Displaying List Of Javascript Objects As Html List Items

February 28, 2024 Post a Comment

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

Solution 1:

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

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><ulid="aaron-family"></ul><footer><scriptsrc="objects.js"></script></footer></html>

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

Solution 2:

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.

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

Solution 3:

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

Then change

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

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.

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

Hope this helps:)

Solution 4:

This dynamic way to render like this data format into HTML

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

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

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

list(family);

Solution 5:

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><ulid="aaron-family"></ul><scriptsrc="objects.js"type="text/javascript"></script></body></html>

Html5 Guru