0

Tengo una extensa lista que estoy creando en Javascript y algunos ítem tienen sub ítem.

Mi lista es algo así:

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

}]

La manera en que llamo a los ítems, y funciona bien; es:

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

Pero no puedo lograr llamar al contenido item de direccion por separados. Porque al nombre muestro como texto, y al geo muestro en un enlace:

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

La estructura completa que uso es lo siguiente:

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;

2 respuestas 2

1

Tenemos que una dirección se compone de las propiedades

  • nombre (string)
  • geo (string, formato de URL)

Que un item se compone de las propiedades

  • nombre: (string)
  • direccion: (array de direcciones)

Y que tu lista es un array de items.

Como los nombres son importantes en esta profesión, voy a cambiar tu lista. En vez de 'nombre' identificaré los items por una propiedad 'grupo'. Su arreglo de direcciones se llamará, convenientemente 'direcciones'.

Para trabajar este arreglo se hace un bucle principal que recorre la lista. En cada iteración, declaras un bucle anidado sobre las direcciones del item actual.

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

Dejo un ejemplo funcionando

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
  • Gracias por la ayuda. Pero me sirvió la otra respuesta Commented el 16 mar. 2022 a las 1:36
0

item es tu objeto, asi que puedes llamar direccion como item.direccion o item["direccion"] pero direccion es a la vez un array de objetos, asi que para acceder al valor, o iteras en cada uno de ellos y entonces obtienes el valor, u obtienes el valor por posicion, tipo item.direccion[0].nombre

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

o

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

Ejemplo:

 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>

7
  • Con las dos opciones busque vueltas y vueltas pero no pude solucionar. Me muestra todos los caracteres como enlace, pero nada de lo que venga del item Commented el 15 feb. 2022 a las 23:01
  • Esta curioso, agregue un snippet como ejemplo en la respuesta y parece tomarlos, exceptuando por "lugar" que no existe en el objeto de ejemplo. Si los llama bien pero no salen no se cual sera el detalle Commented el 15 feb. 2022 a las 23:33
  • Si es curioso. Pero no me funciona. Cómo dije, es extenso mi lista y la estructura de mi tarjeta dentro de tarjeta += `` . Y la única forma que puedo llamar a lo ítems es ${item.nombre} (por ejemplo). Commented el 16 feb. 2022 a las 6:44
  • Hice uso de lo que mencionaste: item["direccion"] y empecé a jugar con eso. Hice muchos cambios hasta llegar a una solución: a mi lista lugar: [{nombre: "", geo: ""}], cambie por lugar: {"nombre":"", "geo": ""}, y este si funcionó con tu mension de item["direccion"] Commented el 16 feb. 2022 a las 6:51
  • La única forma que quiero y que me funciona es el modo: ${item.nombre} o ${item["lugar"].nombre} lo cual ya estoy usando. Commented el 16 feb. 2022 a las 6:54

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.