0

Tengo una lista array de la siguiente manera:

const opcUserPais = {
Argentina: {
    pais: "Argentina",
    codigo: "+54",
    regular: /^([0-9]{10})$/,
    value: "0000 000 000",
    bandera: "src/banderas/ar.png",
},
Brazil: {
    pais: "Brazil",
    codigo: "+55",
    regular: /^([0-9]{3})$/,
    value: "00 0000 000",
    bandera: "src/banderas/br.png"
},
Paraguay: {
    pais: "Paraguay",
    codigo: "+595",
    value: "000 000 000",
    regular: /^([0-9]{10})$/,
    bandera: "src/banderas/py.png"
},

};

Quisiera mostrar todas las banderas en una lista ul, pero no puedo acceder al mismo. La forma menos posible de codigo y escribiendo en el DOM lo hago así sin resultados:

let opciones = [];

opcUserPais.forEach((item) => {
    opciones += `
        <li class="opcion"><img src="${item.bandera}"> <span>${item.pais}:</span> (${item.codigo})</li>
    `;
});

userOpciones.innerHTML += opciones;

Gracias y feliz año nuevo

3
  • Creo que lo que buscas es usar una cadena no una lista: let opciones="";
    – DABL03
    Commented el 30 dic. 2023 a las 22:51
  • Pero si quieres meter en una lista todas las opciones entonces debes usar la funcion push, no +. opciones.push( <li class="opcion">... );
    – DABL03
    Commented el 30 dic. 2023 a las 22:53
  • Yo solo quiero uno: por ejemplo la bandera Commented el 30 dic. 2023 a las 22:57

1 respuesta 1

1

El problema es que los arrays clave/valor no tienen un foreach, pero si podemos usar un simple bucle for:

for (let i in opcUserPais){
    opciones += `
        <li class="opcion"><img src="${opcUserPais[i].bandera}"> <span>${opcUserPais[i].pais}:</span> (${opcUserPais[i].codigo})</li>
    `;
}

Al usar el operador in en el bucle for lo que haces es iterar sobre las claves del array.

const opcUserPais = {
Argentina: {
    pais: "Argentina",
    codigo: "+54",
    regular: /^([0-9]{10})$/,
    value: "0000 000 000",
    bandera: "src/banderas/ar.png",
},
Brazil: {
    pais: "Brazil",
    codigo: "+55",
    regular: /^([0-9]{3})$/,
    value: "00 0000 000",
    bandera: "src/banderas/br.png"
},
Paraguay: {
    pais: "Paraguay",
    codigo: "+595",
    value: "000 000 000",
    regular: /^([0-9]{10})$/,
    bandera: "src/banderas/py.png"
},

};
let userOpciones=document.createElement("ul");

let opciones = "";

for (let i in opcUserPais){
    opciones += `
        <li class="opcion"><img src="${opcUserPais[i].bandera}"> <span>${opcUserPais[i].pais}:</span> (${opcUserPais[i].codigo})</li>
    `;
}

userOpciones.innerHTML += opciones;

document.body.appendChild(userOpciones);

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.