如何用js打印json的所有元素答案

【问题标题】：how to print all elements of json with js如何用js打印json的所有元素
【发布时间】：2019-12-11 19:07:40
【问题描述】：

我需要为数据库的每一行创建一个卡片元素。我的函数中的问题是只打印第一个元素。我忘记了什么？（查询有效）

aggiornaEventi();

function aggiornaEventi() {
    fetch("../user_area/query/select_allevents.php").then(onResponse).then(onJson);
}

function onResponse(response) {
    return response.json();
}

function onJson(json) {

    console.log(json);

    if (json.length !== 0) {
        const eventi = document.getElementById("eventi"); //inserire l'id

        for (const evento of json) {

            const card = document.getElementById("eventi").innerHTML = `
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                    <h5 class="card-title">${evento.titolo}</h5>
                    <p class="card-text">${evento.descrizione} | ${evento.data}</p>
                    <a href="${evento.link}" class="btn btn-primary">Vai</a>
                </div>
            </div>
           `;;


            eventi.appendChild(card);




        }
    }
}

【问题讨论】：

标签： javascript arrays node.js json

【解决方案1】：

看起来您并没有为每张卡片创建一个新元素，而是重复使用同一个元素。

试试：

// ...


          const card = Document.createElement();

          card.innerHTML = `
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                    <h5 class="card-title">${evento.titolo}</h5>
                    <p class="card-text">${evento.descrizione} | ${evento.data}</p>
                    <a href="${evento.link}" class="btn btn-primary">Vai</a>
                </div>
            </div>
           `;

          eventi.appendChild(card);


// ...

【讨论】：

【解决方案2】：

您在 'evento' 元素上覆盖卡片的 innerHTML。您应该使用

const card = document.getElementById("eventi").innerHTML += `...`

或使用Document.createElement();在每次运行时创建一个新元素

【讨论】：

【解决方案3】：

我解决了这个问题，谢谢大家

function onJson(json) {

    console.log(json);

    if (json.length !== 0) {
        const eventi = document.getElementById("eventi"); //inserire l'id

        for (const evento of json) {

            const card = document.createElement("eventi");

            card.innerHTML = `
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                    <h5 class="card-title">${evento.titolo}</h5>
                    <p class="card-text">${evento.descrizione} | ${evento.data}</p>
                    <a href="${evento.link}" class="btn btn-primary">Vai</a>
                </div>
            </div>
           `;

            eventi.appendChild(card);




        }
    }
}

【讨论】：