Home / Questions / 515203
Accepted
Narciso Aifuz
Asked: 2022-07-16 13:38:29 +0800 CST 2022-07-16 13:38:29 +0800 CST

How to access or call sub item of a list

  • 772

I have a large list that I am creating in Javascript and some items have sub items.

My list is something like this:

Let lista = [{
 
 nombre: "Elveramiro",
 direccion: [{
  nombre: "Asunción Paraguay",
  geo: "https://maps.google.com/?-25.282005, -57.635117"
 }]

}]

The way I call the items, and it works fine; it is:

<span>${item.nombre}</span>

But I can't manage to call the item content direccionseparately. Because the name I show as text, and the geo I show in a link:

<span><a href="${item[direccion.lugar]}">${item[direccion.nombre}</a></span>

The complete structure I use is the following:

Let lista = [
{
 nombre: "Elveramiro",
 direccion: [{
  nombre: "Asunción Paraguay",
  geo: "https://maps.google.com/?-25.282005, -57.635117"
 }]
}

]

Let tarjeta = "";

lista.forEach(item => {
 
 tarjeta += `
  
  <section>
   <div class="tarjeta">
    <span><a href="${item[direccion.lugar]}">${item[direccion.nombre}</a></span>
   </div>
  </section>
  
 `;

});

document.getElementById("lista").innerHTML = tarjeta;
javascript

2 Answers

  1. We have that an address is composed of the properties

    • name (string)
    • geo (string, URL format)

    That an item is composed of the properties

    • name: (string)
    • address: (array of addresses)

    And that your list is an array of items.

    Since names are important in this profession, I'm going to change your list. Instead of ' nombre' I will identify the items by a ' grupo' property. Your address array will conveniently be called ' direcciones'.

    To work with this arrangement, a main loop is made that goes through the list. On each iteration, you declare a nested loop over the addresses of the current item.

    lista.forEach(item=>{
     let {grupo,direcciones}=item
     // haces algo con el nombre del grupo, si quieres
     direcciones.forEach(direccion=>{
        let {nombre,geo}=direccion
        // acá haces algo con nombre y geo
     })
})

    I leave an example working

    const lista = [{
    "grupo": "Zona SurOriente",
    "direcciones": [

      {
        "nombre": "LA FLORIDA",
        "geo": "https://www.google.com/maps/@-33.5261,-70.5182,15z"
      },
      {
        "nombre": "LA REINA",
        "geo": "https://www.google.com/maps/@-33.4477,-70.5517,15z"
      }

    ]
  },
  {
    "grupo": "Zona NorPoniente",
    "direcciones": [

      {
        "nombre": "CERRO NAVIA",
        "geo": "https://www.google.com/maps/@-33.4252,-70.7432,15z"
      },

      {
        "nombre": "QUILICURA",
        "geo": "https://www.google.com/maps/@-33.3642,-70.7307,15z"
      }
    ]
  },
  {
    "grupo": "Zona NorOriente",
    "direcciones": [{
        "nombre": "LAS CONDES",
        "geo": "https://www.google.com/maps/@-33.4020,-70.5338,15z"
      },
      {
        "nombre": "VITACURA",
        "geo": "https://www.google.com/maps/@-33.3779,-70.5724,15z"
      }
    ]
  },
  {
    "grupo": "Zona SurPoniente",
    "direcciones": [

      {
        "nombre": "LA CISTERNA",
        "geo": "https://www.google.com/maps/@-33.5332,-70.6607,15z"
      },


      {
        "nombre": "PEDRO AGUIRRE CERDA",
        "geo": "https://www.google.com/maps/@-33.4903,-70.6764,15z"
      }
    ]
  }
]

const listaDiv = document.querySelector('#lista')
lista.forEach(item => {
  let {
    grupo,
    direcciones
  } = item,
  grupoDiv = document.createElement('div'),
    grupoUl = document.createElement('ul'),
    grupoTitle = document.createElement('div')

  grupoTitle.classList.add = 'title'
  grupoTitle.innerText = grupo
  grupoDiv.appendChild(grupoTitle)

  direcciones.forEach(direccion => {
    let direccionLi = document.createElement('li')
    direccionLink = document.createElement('a')
    direccionLink.href = direccion.geo
    direccionLink.innerText = direccion.nombre
    direccionLi.appendChild(direccionLink)
    grupoUl.appendChild(direccionLi)
  })
  grupoDiv.appendChild(grupoUl)
  listaDiv.appendChild(grupoDiv)

})
    #lista {
  display: flex;
  flex-direction: column;
}

#lista>div {
  margin-top: 0.6em;
  border-top: 1px solid #ccc;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: self-start;
}

#lista>div>ul {
  margin: 0;
  padding: 0;
  font-size: 0.8em;
}
    <div id="lista">

</div>

    • 1
  2. Best Answer

    item is your object, so you can call address like item.address or item["address"] but address is also an array of objects, so to access the value, you either iterate through each one and then get the value, or get the value by position, type item.address[0].name

    lista.forEach(item => {
 
 tarjeta += ""
    +"<span><a href='"+item.direccion[0].lugar+"'>" + item.direccion[0].nombre +"</a></span>"
 +"";
});

    either

    lista.forEach(item => {
   item.direccion.forEach(subitem => {
    tarjeta += ""
    +"<span><a href='"+subitem.lugar+"'>" + subitem.nombre +"</a></span>"
  +"";
  })
});

    Example:

     let lista = [
    {
      nombre: "Elveramiro",
      direccion: [{
        nombre: "Asunción Paraguay",
        geo: "https://maps.google.com/?-25.282005, -57.635117"
      }]
    }
  ]

let tarjeta = "";

lista.forEach(item => {
 
  item.direccion.forEach(subitem => {
    tarjeta += ""
    +"<span><a href='"+subitem.lugar+"'>" + subitem.nombre +"</a></span>"
  +"";
  })
});

document.getElementById("lista").innerHTML = tarjeta; 
</script>
    <section>
  <div id="lista"></div>
</section>

    • 0