1

tengo que obtener los datos de la URL que aparece en el fetch, pero los datos estan en arrays dentro del JSON y solo me trae uno solo, ¿como podria obtener todos los datos y hacer que recorra completo el objeto?

//Se llama la API con Fetch

fetch('https://api.bridgedataoutput.com/api/v2/OData/test/Property?access_token=6baca547742c6f96a6ff71b138424f21')
.then((response) => response.json())
.then((json) => {
    let resultados = json.value;
    const container = document.getElementById('container');
    for(i = 0; i < resultados.length; i++){
        for(j = 0; j < resultados.Media[i].length; j++){
            container.innerHTML = `
            <div>
                <img src="${resultados[i].Media[j].MediaURL}">
            </div>`;
            console.log(i, j);
        }

    }
    console.log(resultados);

});

2 respuestas 2

1

Aparte de la concatenación, el problema es que estás usando mal el índice para recorrer 'Media': for(j = 0; j < resultados.Media[i].length; j++), debería ser resultados[i].Media.length.

Sin embargo, te recomiendo usar .forEach() en lugar de for, para simplificar tanto el ciclo como la forma de acceder a cada propiedad.

const container = document.getElementById('container');
fetch('https://api.bridgedataoutput.com/api/v2/OData/test/Property?access_token=6baca547742c6f96a6ff71b138424f21')
.then((response) => response.json())
.then((json) => {
    let resultados = json.value;
    let html = '';
    resultados.forEach(res => {
        res.Media.forEach(media => {
            html += `
            <div>
                <img src="${media.MediaURL}">
            </div>`;
        });
    });
    container.innerHTML = html;
});
/* Solo para poder ver las imágenes */
img { max-width:200px; }
<div id="container"></div>

Por cierto, no es recomendable modificar el HTML de un elemento dentro de ciclos, porque en cada iteración obligas al navegador a interpretar nuevamente el contenido. Es mejor crear una variable, llenarla en el ciclo y, al final, asignarla al contenedor.

1
  • Muchas gracias, esa solución me ayudo muchisimo.
    – mnsperez97
    el 27 may. 2021 a las 20:33
0

Tu Array se ve bien con respecto al recorrido, lo que sucede es que en el inner html esta sustituyendo el contenido en cada vuelta y lo que necesitas hacer es acumularlo con +=.

En tu caso sería:

container.innerHTML += 
            '<div>
                <img src="${resultados[i].Media[j].MediaURL}">
            </div>';
2
  • muchas gracias me funciono, pero ahora me da este error:Uncaught (in promise) TypeError: res.Media[j] is undefined
    – mnsperez97
    el 27 may. 2021 a las 20:04
  • uno de los problemas que tengo es que el array principal donde (resultados.length) tiene 10 elementos y el segundo de donde obtengo las imagenes (resultados[i].Media[j].MediaURL) el Media contiene 5 elemento, y no se como hacer que recorra los 10 y por cada iteracion recorra los 6 elementos de media
    – mnsperez97
    el 27 may. 2021 a las 20:24

Tu Respuesta

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

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