How do i make sure the array is filled in Fetch API?

Question

const userfetched =[];
fetch('https://jsonplaceholder.typicode.com/users').then(response=> response.json()).then(user=>userfetched.push(user));
console.log(userfetched)

here it outputs empty array.

but if i use the following code :

const userfetched =[];
fetch('https://jsonplaceholder.typicode.com/users').then(response=> response.json()).then(user=>console.log(user));
console.log('end')

it outputs end then the array values.

How do i wait till the fetch response is filled and iterate over it?

code execution outside of then continues , inside then executes when the promise returns(async). thats why you having this issue — Panos K, May 22 '18 at 08:56
How do I fix this , sorry I am new to js.. and not sure how to fix . Just trying to learn — Sarav, May 22 '18 at 08:57
well if you want to be in sync with promise you have to console.log inside second then . this is where promise is resolved — Panos K, May 22 '18 at 08:59
The answers posted works , but not able to export . I used state variable to bind the data to render . Thanks all — Sarav, May 22 '18 at 14:55

score 2 · Answer 1 · answered May 22 '18 at 08:55

2

Just put console.log(userfetched) after fetch promise resolves and parsed to json:

fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => response.json())
  .then(user => { 
      console.log(user) 
      // and do whatever you wanna do here
  });

answered May 22 '18 at 08:55

StackedQ

3,293
1
20
36

That's because it has not got the response yet. After fetch promise is resolved (server responded) and it parsed to json the `console.log` can execute. – StackedQ May 22 '18 at 08:58
Ah I need to export after pushing those values – Sarav May 22 '18 at 08:58
take a look at [this](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa) – StackedQ May 22 '18 at 09:08

Prabhu · Answer 2 · 2018-05-22T10:24:29.370

0

Call callApi function once the featch is complete and push the responce to the array and console the result

its working async change to sync

const userfetched = [];
class App extends Component {

     async callApi() {
       var res = await fetch('https://jsonplaceholder.typicode.com/users')
       var result = await res.json()
       console.log(JSON.stringify(result))
     }

      componentDidMount() {
        this.callApi()
      }

   render{
        return( //do something.... )
   }
}

edited May 22 '18 at 10:24

answered May 22 '18 at 08:58

Prabhu

869
6
11

had compile errors, corrected and run .. not working still . got empty array – Sarav May 22 '18 at 09:17
are you using any function to call the fetch ? – Prabhu May 22 '18 at 09:19
no whatever i gave in the question is the actual code, i am using – Sarav May 22 '18 at 09:20
you can write a fetch inside a function and call that a function name where ever you want this.callApi() – Prabhu May 22 '18 at 09:23
and using async await for that function – Prabhu May 22 '18 at 09:23
same issue again :( – Sarav May 22 '18 at 09:35
tried this : const getdata = async () => { const data = await fetch('https://jsonplaceholder.typicode.com/users'); const result = await data.json(); console.log(JSON.stringify(result)); }; getdata(); console.log('end'); – Sarav May 22 '18 at 09:36
where did you call the getdata function inside a class or outside a class ? – Prabhu May 22 '18 at 09:42
There is no class . It’s just a file with one function you recommended and I invoked in that file – Sarav May 22 '18 at 09:54
you can put the code to your browser console const getdata1 = async () => { const data = await fetch("https://jsonplaceholder.typicode.com/users"); const result = await data.json(); console.log(JSON.stringify(result)); }; getdata1() – Prabhu May 22 '18 at 10:11
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/171535/discussion-between-saravanakumar-v-and-prabhu). – Sarav May 22 '18 at 10:25
it works when printing . But not able to export it .. I changed the code to utilize state variable , so for now it is working – Sarav May 22 '18 at 14:06

How do i make sure the array is filled in Fetch API?

2 Answers2

Linked