unable to display data dynamically using fetch API

Question

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 class="card">
            <img src="${avatar_url}"> 
            <h4> ${login}</h4>
            <a href="${html_url}" class="btn"> view profile </a>
     
       </article>`;


    })
    .join(" ");

  place.innerHTML = newFollowers;
}

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

can you try adding await to getdata so it looks like const getData = await fetchFollowers() — benwl
– benwl, Commented Aug 18, 2022 at 10:07
it returns a promise immediately because fetchFollowers is an async function, if you want to return the data, you need to wait for it to complete. — benwl
– benwl, Commented Aug 18, 2022 at 10:08

Nick Vu · Accepted Answer · 2022-08-18 10:02:55Z

3

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 class="card">
            <img src="${avatar_url}"> 
            <h4> ${login}</h4>
            <a href="${html_url}" class="btn"> view profile </a>
     
       </article>`;


    })
    .join(" ");

  place.innerHTML = newFollowers;
}

//call `display` function
display();

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

answered Aug 18, 2022 at 10:02

Nick Vu

15.6k5 gold badges29 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Salman Shahid Over a year ago

thankyou for pointing it out. yes i forget to call the function but the code is still no working

Nick Vu Over a year ago

Did you try to run my code? You can see returned results on that. @SalmanShahid

Salman Shahid Over a year ago

yes i did it to the letter but i am not getting anything . in the console section it clearly shows that the promise has been fulfilled and the data has been recieved. it even shows all the data in the console but somehow it is not getting displayed

Mohammad Aslam · Accepted Answer · 2022-08-18 10:04:04Z

2

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 class="card">
            <img src="${avatar_url}"> 
            <h4> ${login}</h4>
            <a href="${html_url}" class="btn"> 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.

answered Aug 18, 2022 at 10:04

Mohammad Aslam

2503 silver badges14 bronze badges

2 Comments

Salman Shahid Over a year ago

thankyou for the reply.. i applied the said changes in the code but it did not work.. dont understand what the problem could be

Salman Shahid Over a year ago

my appologies.. i was not doing it properly.. it really worked after i applied your suggestions.. thankyou very much. you taught me something

Andrey Smolko · Accepted Answer · 2022-08-18 10:03:27Z

1

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...});

answered Aug 18, 2022 at 10:03

Andrey Smolko

1,2147 silver badges10 bronze badges

Collectives™ on Stack Overflow

unable to display data dynamically using fetch API

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related