0

So I had a variable defined like this: 

  const myQuestions = [
    {
      question: "Question 1?",
      answers: {
        a: "A",
        b: "B",
        c: "The Correct One"
      },
      correctAnswer: "c"
    },
    {
      question: "Question 2?",
      answers: {
        a: "A",
        b: "B",
        c: "The Correct One"
      },
      correctAnswer: "c"
    }
  ];

but then I wanted to extract what it's inside the variable from a json file from an URL and put it inside of it, so I deleted that snippet of code and added this one:

var myQuestions;
fetch('someURLtoaJSONfile.json')
    .then(response => response.json())
    .then(data => {
      let jsonString = JSON.stringify(data);

      myQuestions = JSON.parse(jsonString);
    });

and it tells me that myQuestions is undefined. However if I define myQuestions = []; it works but when I console.log(myQuestions inside the function, it works and it tells me exactly how it should be, but when I use console.log(myQuestions); outside the function it tells me that the array is empty... why?

C. Cristi
  • 569
  • 1
  • 7
  • 21
  • and what should I do? – C. Cristi Feb 12 '19 at 20:01
  • The first piece of code isn't valid JSON. That's not what's tripping you up, is it? – Cat Feb 12 '19 at 20:02
  • Reading that post is a good start. It has several solutions and since this is an important aspect of JavaScript, understanding how it works will benefit you in the future as well. – Ivar Feb 12 '19 at 20:03
  • See also [Return from a promise then()](https://stackoverflow.com/q/34094806/1715579). – p.s.w.g Feb 12 '19 at 20:10

1 Answers1

0

If I'm correct, the reason is that the code inside your "then" will not execute immediately, but after you get the data. So JS code will continue after that fetch and it will execute the console.log where myQuestions will be undefined.

EDIT

var myQuestions;
fetch('someURLtoaJSONfile.json')
    .then(response => response.json())
    .then(data => {
        let jsonString = JSON.stringify(data);
        myQuestions = JSON.parse(jsonString);
        // output will be as expected because this will be 
        // called when data arrives
        console.log(myQuestions);
    });
// if done outside the function, output is undefined because
// it is called immediately after fetch is called (and fetch is 
// is an asynchronous function so there is no data immediately
// after fetch because it needs time to get the data)
console.log(myQuestions);
Никола Караклић
  • 312
  • 4
  • 8
  • The console.log is inside the then chain, so should run at the correct time. – Cat Feb 12 '19 at 20:05
  • If this answer explained you "why?" is this happening, please be sure to upvote. :) – Никола Караклић Feb 12 '19 at 20:29
  • @Cat the "then" where the console.log lies in is called after the first "then". First "then" will be called after some time when the server responds, so answer to your comment is: Yes, that console.log inside a then WILL run when data is recieved, but that does not mean the second "out-of-the-then" console.log will output correct data because fetch is an asynchronous function. The next thing getting executed is the console.log outside the chain and AT THAT POINT there will be no data in "myQuestions". – Никола Караклић Aug 28 '19 at 13:13