如何使用 javascript 连续制作 3 列和 2 列（引导程序）？

Question

I'm a beginner in JavaScript. I've got a problem. I need to create some elements and I need to put my API's data is these elements. But I want to create 3 cards (bootstraps) in my first row and 2 in my second row.

But I think my loop isn't ok. Because all my data are on my fifth card.

That's my code HTML and JavaScript:

HTML:

    </section>
<section class="container">
    <div class="row">
        <div id="colCam1" class="col-12 col-lg-4"></div>
        <div id="colCam2" class="col-12 col-lg-4"></div>
        <div id="colCam3" class="col-12 col-lg-4"></div>
    </div>
    <div class="row">
        <div id="colCam4" class="col-12 col-lg-4"></div>
        <div id="colCam5" class="col-12 col-lg-4"></div>
    </div>
</section>

JS:

fetch("http://localhost:3000/api/cameras")
.then((response) =>
response.json().then ((data) => {
    console.log(data);
    for(i=0; i < data.length; i++) {
        let indexCard = document.createElement("div");
        let indexImg = document.createElement("img");
        let indexBodyCard = document.createElement("div");
        let indexProductTitle = document.createElement("h5");
        let indexProductPrice = document.createElement("p");

        colCam1.appendChild(indexCard);
        colCam2.appendChild(indexCard);
        colCam3.appendChild(indexCard);
        colCam4.appendChild(indexCard);
        colCam5.appendChild(indexCard);
        indexCard.classList.add("card");
        indexCard.appendChild(indexImg);
        indexImg.classList.add("card-img-top");
        indexCard.appendChild(indexBodyCard);
        indexBodyCard.classList.add("card-body");
        indexBodyCard.appendChild(indexProductTitle)
        indexProductTitle.classList.add("card-title");
        indexBodyCard.appendChild(indexProductPrice);
        indexProductPrice.classList.add("card-text");

        indexProductTitle.innerHTML = data[i].name;
        indexProductPrice.innerHTML = parseInt(data[i].price) + " €";
        indexImg.setAttribute("src", data[i].imageUrl);
    }
})

);

That's the result on my inspector:

Result of my code

Thx for your help

Answer 1

If I understood correctly, you are only expecting to get 5 elements from your API and you want to put each of them in one column. If that's the case, you can put your column elements in an array and index them accordingly in your loop like so:

const cols = [colCam1, colCam2, colCam3, colCam4, colCam5]
for(i=0; i < data.length; i++) {
    let indexCard = document.createElement("div");
    let indexImg = document.createElement("img");
    let indexBodyCard = document.createElement("div");
    let indexProductTitle = document.createElement("h5");
    let indexProductPrice = document.createElement("p");

    cols[i].appendChild(indexCard);
    indexCard.classList.add("card");
    indexCard.appendChild(indexImg);
    indexImg.classList.add("card-img-top");
    indexCard.appendChild(indexBodyCard);
    indexBodyCard.classList.add("card-body");
    indexBodyCard.appendChild(indexProductTitle)
    indexProductTitle.classList.add("card-title");
    indexBodyCard.appendChild(indexProductPrice);
    indexProductPrice.classList.add("card-text");

    indexProductTitle.innerHTML = data[i].name;
    indexProductPrice.innerHTML = parseInt(data[i].price) + " €";
    indexImg.setAttribute("src", data[i].imageUrl);
}

This code is going to break if your API returns more than 5 elements. You could try something like cols[i % 5].appendChild(indexCard); or consider other layout strategies.