0

como podría recorrer este array, y mostrar dicho contenido dentro del DOM, con javascript. Este debe de mostrar dicho contenido en los div creados y añadidos en el body, estos no están creados a mano en el cuerpo del HTML, si no que están añadidos desde el DOM. Muestro el código a continuación. Este es el resultado

    //creo el elemento div
var contenedor0 = document.createElement("div");
document.body.appendChild(contenedor0);


//le añado un id al elemento div1
var div = document.getElementsByTagName("div")[0];
div.className = "mostrar_div_1";
div.id = "mostrar_div_1";


let datos = [
    {
        nombre:"Cualquiera",
        descripcion:"Cualquiera 2",
        precio:"2222",
        imagen:"una ruta cualquiera"
    }

]


<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TAREA 5 EJERCICIO 2</title>
    <link rel="stylesheet" href="estilos.css">
    <script src="./datos.js"></script>
    
</head>
<body>

    <script src="./ejercicio2.js"></script>    
</body>
</html>

2 respuestas 2

2

Para poder recorrer tu array de datos una opcion podria ser un forEach el cual recorre todos los valores de tu array y puedes acceder a cada uno de estos valores a través de un callback. Seguidamente puedes crear los divs y agregar el contenido segun lo requieras como se puede observar en el siguiente ejemplo:

const datos = [{
    nombre: "Cualquiera",
    descripcion: "Cualquiera 1",
    precio: "1111",
    imagen: "una ruta cualquiera"
  },
  {
    nombre: "Cualquiera 2",
    descripcion: "Cualquiera 2",
    precio: "2222",
    imagen: "una ruta cualquiera 2"
  }
];

datos.forEach((item, index) => {
  const div = document.createElement("div");
  div.className = `mostrar_div_${index + 1}`;
  div.id = `mostrar_div_${index + 1}`;
  div.innerHTML = `${item.nombre} - ${item.descripcion} - ${item.precio} - ${item.imagen}`;
  document.body.appendChild(div);
});

1
  • hola @BetaM, no se como poner la solución de manera correcta con una imagen de url subida, si puedes hacer el favor para que se vea bien la solución sería de agradecer, un saludo ! el 4 ene. 2021 a las 11:00
0

Solución

Al final lo resolví de manera fácil, googleando un poco al final sale,

En dicho array, para la imagen y para los demás datos hice una función la cual se se le pasa como parametro info, y luego la recorro con los atributos de dicho array, para mostrar su información por pantalla, para la imagen lo unico que he echo como es un ejercicio único, con su url, es pasarle el origen de destino y concatenarselo en el img, para quitar la coma he usado join(''), que une ese espacio en blanco y quita ese caracter en sí. un saludo espero que sirva de ayuda. !

    const datos = [{
    nombre: "Cualquiera",
    descripcion: "Cualquiera 1",
    precio: "1111",
    imagen: "una ruta cualquiera"
  },
  {
    nombre: "Cualquiera 2",
    descripcion: "Cualquiera 2",
    precio: "2222",
    imagen: "una ruta cualquiera 2"
  }
];



//creo el elemento div
var contenedor0 = document.createElement("div");
document.body.appendChild(contenedor0);


//le añado un id al elemento div1
var div = document.getElementsByTagName("div")[0];
div.className = "flex-container";
div.id = "contenedor";

var mostrarInfo = datos.map(function(info){
    return  '<div>'
                +'<h2>'+info.nombre+'</h2>'
                +'<p>'+info.descripcion+'</p>'
                +'<p>'+info.precio+' € </p>'
                +'<img src='+info.imagen+' />' 
            +'</div>';
}).join('')
document.getElementById("contenedor").innerHTML= mostrarInfo;

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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