Как вытащить данные из объекта с разным кол-вом свойств в ячейки n x n размеров

Тема в разделе "JavaScript", создана пользователем immortal727, 20 апр 2020.

  1. immortal727

    immortal727

    Регистрация:
    17 май 2018
    Сообщения:
    17
    Симпатии:
    0
    let Fields = {
    cat: {
    title: "Кот",
    img:"img/cat.jpg"
    },
    book: {
    title: "Книга",
    img:"img/book.jpg"
    },
    car: {
    title: "Машина",
    img: "img/car.jpg",
    }
    }
    function generateField(object, section, max) {
    //let n = randomInteger(3, max);
    let n = max;
    section.style.cssText = `
    grid-template-columns:repeat(${n},1fr);
    grid-template-rows:repeat(${n},1fr);`
    ;
    var counter = 0; // Для подсчета свойств в объекте

    for (let item in object) {
    //consol.log(`Длина объекта ${object[item].length}`);

    counter++;
    }
    // console.log(`Число свойств в объекте ${counter}`)
    for (let i = 0; i < max; i++) {

    for (let item in object) {
    let div = document.createElement("div");
    let title = document.createElement("h2");
    title.innerText = object[item].title;
    let pic = document.createElement("img");
    pic.setAttribute("src", object[item].img);
    div.append(title, pic);
    section.appendChild(div);
    }

    }
    }
    function randomInteger(min, max) {
    // случайное число от min до (max+1)
    let rand = min + Math.random() * (max + 1 - min);
    return Math.floor(rand);
    }
    let section = document.querySelector(".GameField");
    generateField(Fields, section, 5);

    В css
    .GameField {
    display: grid;
    grid-gap: 15px;
    grid-auto-flow: dense;
    }

    Ну соответственно в html
    <div class="GameField">
    </div>