unable to display data dynamically using fetch API-CodePudding

I am facing problems while displaying data fetched dynamically from an API. console log clearly shows that the promise has been fulfilled and the data has been successfully fetched but the data is somehow not getting displayed in the relevant container. I am using map method of arrays to dynamically display data using template strings. An inspection of the page also does not mentions any related errors in the code. what could be the problem?

const url = 'https://api.github.com/users/john-smilga/followers?per_page=100'

const fetchFollowers = async() => {
  const response = await fetch(url);
  const data = await response.json();
  return data;

}

const getData = fetchFollowers();

const place = document.getElementById("container")

const display = () => {
  let newFollowers = getData.map((item) => {
      const {
        avatar_url,
        login,
        html_url
      } = item;
      return `<article >
            <img src="${avatar_url}"> 
            <h4> ${login}</h4>
            <a href="${html_url}" > view profile </a>
     
       </article>`;


    })
    .join(" ");

  place.innerHTML = newFollowers;
}

<div id="container"></div>

CodePudding user response：

You haven't called display function anywhere. Along with it, you also should call fetchFollowers with a proper async/await to wait for a response, and then you can use it for data population on HTML.

const url = 'https://api.github.com/users/john-smilga/followers?per_page=100'

const fetchFollowers = async () => {
  const response = await fetch(url);
  const data = await response.json();
  return data;

}

const display = async () => {

  //fetch data
  const getData = await fetchFollowers();

  const place = document.getElementById("container");

  let newFollowers = getData.map((item) => {
      const {
        avatar_url,
        login,
        html_url
      } = item;
      return `<article >
            <img src="${avatar_url}"> 
            <h4> ${login}</h4>
            <a href="${html_url}" > view profile </a>
     
       </article>`;


    })
    .join(" ");

  place.innerHTML = newFollowers;
}

//call `display` function
display();

<div id="container"></div>

CodePudding user response：

Hi Salman when you are calling fetch followers the function is returning promise and you are trying to iterate over a promise object instead you need to wait for the data to be fetched before iterating over it there are multiple ways to do this adding one of the methods to fix your code.

const url =  'https://api.github.com/users/john-smilga/followers?per_page=100'

const fetchFollowers  = async () => {
   const response = await fetch(url);
   const data = await response.json();
   return data;

}

const display = async () => {
   const getData = await fetchFollowers();
   console.log(getData);
   const place = document.getElementById("container")
   let newFollowers  = getData.map((item)=> {
    const { avatar_url, login, html_url } = item;
    return  `<article >
            <img src="${avatar_url}"> 
            <h4> ${login}</h4>
            <a href="${html_url}" > view profile </a>
     
       </article>` ;   
    

   })
   .join(" ");
   
   place.innerHTML =newFollowers;   
}
display();

You can update the above code as per your needs. Hope you understand the underlying problem.

CodePudding user response：

that line:

const getData =fetchFollowers();

return a promise, but not a result from a promise

wrap all code in async function and:

const getData = await fetchFollowers();

use kind of promise syntax:

fetchFollowers().then(getData=>{console.log(getData); ...other code...});