Assign JSON Data to a Variable

JavaScript
1

I’m having problems assigning JSON to a variable. I’m using the $.getJSON method. I read up a bit and somewhat understand async calls. Supposedly, it doesn’t wait till it has the completed the fetch but fires other functions/console logs. I did a bit more checking and the solution was to use a callback function or .done promise? I have tried both but I still can’t seem to get it to work. Within the function or .done, I can correctly log the contents. I figured if I did my assignment within these, then the global variable should store the data. However, even though it does log within callback/promise, I can’t assign the variable. Or perhaps it does assign but it doesn’t change the fact that the console log afterward still runs before the assignment is done? If so (or if not so), could some please clarify for me? I’m a bit lost on how to fix this.

The main problem is I’d like to store the JSON data in a variable so I don’t have to fetch it everytime. I’m also using react, so the idea is to use the variable in JSX while rendering.

Code below:

let quotes;
let getData = $.getJSON(
  "https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json"
).done(function(result) {
  quotes = result;
  console.log(quotes.quotes[12]) // This correctly shows a quote
});
console.log(quotes.quotes[10]) //This shows nothing
2

You will have to work inside .done. You could update your state there and React will render on the update.

That’s the normal behavior of asynchronous code.

1 Like
3

Okay, I understand. One thing though. Do you mean I include the entire JSON in my state i.e have the quotes variable in state? Although I’m just starting with react, I haven’t really encountered such use. I originally planned to just have quote and author (for a single quote from the quotes object in the JSON url) in state, then update this to reflect other states as necessary. Are there side effects or performance issues in putting the entire quotes object in state?
If you meant, updating my quote and author state within .done rather than having the entire quotes object in state, wouldn’t that mean it has to fetch the entire JSON first each time? I was trying to avoid this as it seems to be slower.

Is there a best practice for something like this? Or do you have a possible suggestion?

4

You could do either. The amount of quotes you are fetching is a small amount of data and you would be fine holding that all in your state. If it were something like millions of quotes you would probably want to make a new request for a quote each time but in this case I would say either way would be fine.

Making a request for a new quote each time however is probably the pattern you will encounter more often if you’re working with an API or database but it depends I guess.

1 Like
5

In this case, you can easily enough just store an array of quotes on the front end:

const quotes = ['quote1','quote2','quote3'];

Unless you have a huge data set, this will not cause any performance problems.

However, in real apps, data is stored in a remote database, because it makes it much easier for that data to be managed and modified and accessed in different places. Think of this analogy: it is much easier to have your money in a bank rather than carrying it around with you. It is safer, and you can access it anywhere. Similarly, its much better to have you data in a database.

Also, from a learning point of view, making data requests to a remote server is a very important skill to learn. In fact, I’ll go out on a limb here and state that learning how to make HTTP requests is the single most important concept in web programming.

1 Like