aligning fetch api array of objects in bootstrap 4 rows and columns using foreach loop to iterate through array

  arrays, bootstrap-4, fetch-api, html, javascript

I am fetching data from an external API which is an array of objects(each objects contain Details of harry potter movie character and there are 50 objects) I am using foreach loop to iterate through array so that I can show every object in my browser I am using Bootstrap 4 rows and columns method, now I want first object from array to show in first row first column and second object in first row second column, similarly third object in second row first column fourth object in second row second column and so on. how can I Achieve this with bootstrap 4 ?

**HTML file**
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link
            rel="stylesheet"
            href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
            integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
            crossorigin="anonymous"
        />
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
            integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
            crossorigin="anonymous"
        />
        <link rel="stylesheet" href="style.css" />
        <title>harry poter</title>
    </head>
    <body>
        <div class="gap">
            <h1 class="font-weight-bold text-dark">
                ✨Harry Potter Characters✨
            </h1>
        </div>
        <div class="form-group gap-1">
            <input
                type="search"
                class="form-control"
                placeholder="search for character"
            /><i class="fas fa-search search"></i>
        </div>

        <div class="container gap-2">
            <ul id="hpcharacters"></ul>
        </div>

        <script src="main.js"></script>

        <script
            src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
            integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
            crossorigin="anonymous"
        ></script>
        <script
            src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"
        ></script>
        <script
            src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"
        ></script>
    </body>
</html>

JAVASCRIPT file

const hpCharacters = document.querySelector("#hpcharacters");

async function getHpCharacters() {
    const res = await fetch("http://hp-api.herokuapp.com/api/characters");

    const data = await res.json();
    let output = "";
    data.forEach((user) => {
        output += `
        <div class="row">
        <div class="col-5">
        <div class="row">
        <div class="col-sm-5">
       <li> ACTOR:${user.actor}</li>
              <li> NAME:${user.name}</li>
       <li> HOUSE:${user.house}</li>
       </div>
       <div class="col-sm-5"">
       <img src="${user.image}" class="img-fluid">
       </div>
       </div>
       </div>
       <div class="col-5">
       <div class="row">
        <div class="col-sm-5">
       <li> ACTOR:${user.actor}</li>
              <li> NAME:${user.name}</li>
       <li> HOUSE:${user.house}</li>
       </div>
       <div class="col-sm-5"">
       <img src="${user.image}" class="img-fluid">
       </div>
       </div>
       </div>
       </div>
       </div>`;
    });
    hpCharacters.innerHTML = output;
}

getHpCharacters();

Source: Ask Javascript Questions

LEAVE A COMMENT