0

Tengo el siguiente objeto tipo json:

const json = [
    {
        Nombre: "Disney+",
        Url: "https://img.icons8.com/doodle/48/FFFFFF/disney-plus.png"
    },
    {
        Nombre: "Netflix",
        Url: "https://img.icons8.com/color/48/FA5252/netflix-desktop-app--v1.png"
    },
    {
        Nombre: "AppleTv",
        Url: "https://img.icons8.com/ios-filled/50/000000/apple-tv.png"
    },
    {
        Nombre: "Amazon",
        Url: "https://img.icons8.com/doodle/48/000000/amazon-prime-video.png"
    }
];

Y tengo un array que puede contener uno o más Nombre, por ejemplo:

Array1 = ["Disney+", "Netflix", "AppleTv"];
Array2 = ["AppleTv", "Amazon"];
Array3 = ["Netflix"]

Y lo que quiero es comparar el array con los nombres del objeto json y si ambos coinciden, generar una imágen con dicha Url que contiene el objeto.

Y quiero agregar las imágenes en mi HTML:

<div className="card-text">
   {compareBrand(s?.Plataformas)}
   <div id="imageContainer"></div>
</div>

Este es mi código hasta el momento, pero no funciona:

function compareBrand(Plataformas){
    var container = document.getElementById('imageContainer');

    for (let i = 0; i < Plataformas.lenght; i++) {
        for (let j = 0; j < json.lengtht; j++) {
            if(Plataformas[i] == json[j].Nombre){
                var img = document.createElement('img');
                img.src = json[j].Url;
                container.appendChild(img);
            }
        }
    }  
}

1 respuesta 1

2

No se muy bien como lo quieres hacer. Veo que tienes la etiqueta reactjs. Si estás usando react, no necesitas usar el getElementById ni el createElement ni appendChild. Simplemente con un map del array de plataformas bastaría.

const plataformas = ["Disney+", "Netflix", "AppleTv"];


    <div id="imageContainer">
        {plataformas.map(x => {
            const elemData = json.find(y => y.Nombre === x);
            if(elemData){
                return <img src={elemData.Url} />
            }else return <></>
        })}
    </div>

Recorres el array platafomas, si existe en el json, devuelves una imagen con src el valor del json, si no existe devuelves un elemento vacío.

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.