Using fetch to get data from an API, how to access data after promise has resolved?

Question

Running the below code on the console, I get an array of objects.

fetch('https://api.github.com/users/chriscoyier/repos')
  .then(response => response.json())
  .then(data => {
    // Here's a list of repos!
    console.log(data)
  });

How can I access the data later? For example if I wanted to console.log the data[0].archive_url, after the promise has resolved? But that gives an error "Uncaught ReferenceError: data is not defined". How do I access that array of objects?

console.log(data[0].archive_url) works fine for me. https://jsfiddle.net/dyspkd12/ — Adrian, Aug 01 '17 at 07:42
@Adriani6 I would like to access the data after the promise has resolved. That only works if I put it in the fetch request immidietly. — userden, Aug 01 '17 at 07:50
@Suomi I see, here's another fiddle then. https://jsfiddle.net/dyspkd12/2/ — Adrian, Aug 01 '17 at 07:59

score 1 · Accepted Answer · answered Aug 01 '17 at 07:53

var myGlobalVar;

fetch('https://api.github.com/users/chriscoyier/repos')
  .then(response => response.json())
  .then(data => {
    console.log(data);
    myGlobalVar = data;
  });

Once this request has finished (once you see the console output), the data is now available in the variable myGlobalVar for you to play around with on the console. You could also use your browser's debugger to set a breakpoint in the callback function and have direct access to data from there.

Note that this won't work in actual code, this is only useful for the interactive console: How do I return the response from an asynchronous call?

Using fetch to get data from an API, how to access data after promise has resolved?

1 Answers1