Display the data in API

JavaScript
1

i want to display the data from an API and i have the code but my question is;

is there any short and basic way to write document.getElementById part with a for loop or sth else. because it is like a repeating process.

HTML code

<div>

<div id=“name1”></div>

<div id=“surname1”></div>

<img src=“” alt=“” id=“image1”>

</div>

<div>

<div id=“name2”></div>

<div id=“surname2”></div>

<img src=“” alt=“” id=“image2”>

</div>

<div>

<div id=“name3”></div>

<div id=“surname3”></div>

<img src=“” alt=“” id=“image3”>

</div>

JavaScript Code

function getApi() {
let req = new XMLHttpRequest();
req.open(“GET”,“https://reqres.in/api/users?page=2”);
req.send();
req.onload=function(){
let jsonObj = req.responseText;
let profileJson = JSON.parse(jsonObj);
console.log(profileJson.data)

        document.getElementById("name1").innerHTML=profileJson.data[0].first_name;
        document.getElementById("surname1").innerHTML=profileJson.data[0].last_name;
        document.getElementById("image1").src=profileJson.data[0].avatar;

        document.getElementById("name2").innerHTML=profileJson.data[1].first_name;
        document.getElementById("surname2").innerHTML=profileJson.data[1].last_name;
        document.getElementById("image2").src=profileJson.data[1].avatar;

        document.getElementById("name3").innerHTML=profileJson.data[2].first_name;
        document.getElementById("surname3").innerHTML=profileJson.data[2].last_name;
        document.getElementById("image3").src=profileJson.data[2].avatar;


}

}

getApi();

2

You can create an object with the fields and the info you need in it like this:

const obj = {
  "ElementId": "infoToGetFromAPI",
  "AnotherElementId": "another info"
}

Then use a for loop to fill the elements with the info:

for (let key in obj) {
document.getElementById(key).innerHtml=Data[obj[key]]
}
3

Please note that I wrote this without documentation so there are probably errors and this might not even be a viable solution.

Using JQuery you could potentially do something like this. Also should be possible with vanilla JS.

 let classCounter = 1;

$.each(profileJson.data, function( index, value ) {

  $(`name${classCounter}`).innerHTML(value.first_name)
  $(`surname${classCounter}`).innerHTML(value.last_name)
  $(`image${classCounter}`).src(value.avatar)

  classsCounter++;
});
4

So there are a few ways to do this, including the way you have chosen (which, as you have discovered, is very clunky). Here are two (I’ve just used fetch and async/await to keep the code short, just mentally replace that with the XHR stuff):

<!-- HTML -->
<div id="people">
  <!-- template clones will be rendered here -->
</div>

<!-- the template tag does not render in the document,
     JS is used to populate and clone it -->
<template id="person">
  <div>
    <p class="name"></p>
    <p class="surname"></p>
    <img src="" alt="" class="image">
  </div>
</template>

// JS
const personTemplate = document.querySelector("#person");
const peopleContainer = document.querySelector("#people");

async function getApi() {
  const req = await fetch("https://reqres.in/api/users?page=2");
  const resp = await req.json();

  for (const person of resp.data) {
    let clone = document.importNode(personTemplate.content, true);
    clone.querySelector(".name").textContent = person.first_name;
    clone.querySelector(".surname").textContent = person.last_name;
    clone.querySelector(".image").src = person.avatar;
    peopleContainer.appendChild(clone);
  }
}

getApi();

<!-- HTML -->
<div id="people">
  <!-- people will be rendered here -->
</div>

// JS
const peopleContainer = document.querySelector("#people");
const person = (name, surname, image) => `
<div>
  <p class="name">${name}</p>
  <p class="surname">${surname}</p>
  <img src="${image}" alt="" class="image">
</div>
`;

async function getApi() {
  const req = await fetch("https://reqres.in/api/users?page=2");
  const resp = await req.json();

  let htmlString = "";

  for (const {first_name, last_name, avatar} of resp.data) {
    htmlString += person(first_name, last_name, avatar);
  }
  // This should probably be an html element that gets appended
  // instead of just shoving strings in willy-nilly, but anyway:
  peopleContainer.innerHTML = htmlString;
}

getApi();

Using templates is probably safer, but it’s a bit of a faff. Reference for them, anyway, and note they don’t work in IE

5

Thanks for all the answers, I learned a lot :dizzy::ok_hand: