Tengo una matriz que contiene objetos. ¿Cómo generar todo, desde el objeto hasta el marcado? Creo que me quedé atrapado en esta parte del código div_child.innerHTML En la salida obtuve este cars[object Object] once veces.
Debería ser así:
img coche: 'Audi' modelo: 'A6' edad: 2014 precio: 20900
let cars = []; cars[0] = { img: 'assets/img/img-1.webp', car: 'Audi', model: 'A6', age: 2014, price: 20900 } // and 9 another objects of cars let div = document.createElement('div'); div.className = 'cars-list'; for (let key in cars) { let div_child = document.createElement('div'); div_child.className = 'cars-list__item'; div_child.innerHTML = `${cars}` + `${cars[key]}`; // As I understood this is the root of problem div.append(div_child); } document.body.append(div);¿Por qué es una mala idea usar "for...in" para la iteración de matrices?
Yo usaría un mapa:
let cars = [{ img: 'assets/img/img-1.webp', car: 'Audi', model: 'A4', age: 2014, price: 20900 },{ img: 'assets/img/img-2.webp', car: 'Audi', model: 'A5', age: 2014, price: 20900 },{ img: 'assets/img/img-3.webp', car: 'Audi', model: 'A6', age: 2014, price: 20900 }, ] // and 9 another objects of cars let div = document.createElement('div'); div.className = 'cars-list'; div.innerHTML = cars.map(car => `<div class="cars-list__item">${car.car}: ${car.model}</div>`).join("") document.body.append(div)