How to access the JSON object outside the Fetch API response?

Question

I am currently having a problem accessing emoji_map outside of the then scope and I don't know how to do it.

Here's my code:

if (req) {
    fetch(req).then(function(response) {
        return response.json();
    }).then(function(response) {
    /* start to observe */
    emoji_map = response.emoji_map;
    console.log(emoji_map);
    });

}

When I do console.log(emoji_map); outside if loop I cannot access the response assigned. Can anyone help?

Make sure you understand asynchronous javascript, there are many articles and tutorials. — wOxxOm, Jan 05 '17 at 03:19
You can't access a variable before it's available, which is precisely, and only, within the `then` scope. — , Jan 05 '17 at 12:56

score 1 · Answer 1 · answered Jan 05 '17 at 12:16

1

I suggest you read more about JavaScript lexical scoping and closures on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures.

function init() {
  var name = "Mozilla"; // name is a local variable created by init
  function displayName() { // displayName() is the inner function, a closure
    alert(name); // use variable declared in the parent function    
  }
  displayName();    
}
init();
init() creates a local variable name and then a function called displayName(). displayName() is an inner function that is defined inside init() and is only available within the body of that function. displayName() has no local variables of its own, however it has access to the variables of outer functions and so can use the variable name declared in the parent function.

answered Jan 05 '17 at 12:16

Marco Castelluccio

10,152
2
33
48

1

The question has nothing to do with closures. It has to do with accessing an asynchronously-available value in a context before it is available. – Jan 05 '17 at 12:55
The question wasn't exactly extra-clear. I thought his problem was that the variable was undefined, even after the promise was resolved. – Marco Castelluccio Jan 05 '17 at 13:48
Right. But how do you know that the promise was resolved unless you're in the part of your code (the `then` handler) which is by definition where it is known to have been resolved? – Jan 05 '17 at 14:04
You can have multiple handlers for the same promise. If you define a variable in one handler, it is undefined in the other. – Marco Castelluccio Jan 05 '17 at 16:02

SoftwareNerd · Answer 2 · 2017-01-05T13:04:58.457

What you can declare a global variable outside your fetch statement, and fill the response in that variable, say in your case

          var sampleData;
          if (req) {
            fetch(req).then(function(response) {
               sampleData = response.json();
               return response.json();
            }).then(function(response) {
                 /* start to observe */
                 emoji_map = sampleData.emoji_map;
                 console.log(emoji_map);
             });

          }

     OR 

      fetch('https://davidwalsh.name/some/url').then(function(response) {
           return //...
        }).then(function(returnedValue) {
         // ...
       }).catch(function(err) {
           // Error :(
       });

you can try the above code or refer this

This fails to understand the very fundamentals of asynchronicity. — , Jan 05 '17 at 12:55

How to access the JSON object outside the Fetch API response?

2 Answers2