Displaying List Of JavaScript Objects As HTML List Items

前端 未结 5 1062
野趣味
野趣味 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: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 `
                

    name: ${person.name}

    age: ${person.age}

    ` }) } ` } list(family);

提交回复
热议问题