Read json file as javascript variable on page load

Question

I'm trying to read data from a json file into JavaScript so it can be used by other functions that are called when a user interacts with the page. I've tried, using jQuery and JS:

var products = null;
$.getJSON("products.json", function(data) {
  products = data;
  console.log(data);
});
console.log(products);

Which produces, as expected:

null
Array [ {…}, {…} ]

I understand this is because of the asynchronous nature of the jQuery code execution. I've read into it a bit, but I'm just struggling to wrap my head around how to re-structure my code (coming from pretty much exclusively Python).

This is how I'm seeing it:

var products = null;
$.getJSON("products.json", function(data) {
  products = data;
  console.log(data);
});

function do_stuff(){
  // Access the attributes of data and do stuff
}

function do_more_stuff(){
  // Do some more stuff with the data
}

I would probably have do_stuff() execute when the page body loads, and let's say do_more_stuff executes when the user selects something in a dropdown menu. Both need to access the data in products.json. I know there are many examples out there, but I'm just not getting it. How can I re-structure the code to actually work?

I happened upon this question and I'm happy to tell you that your This is how I'm seeing it: code is already the solution you're looking for. The only mistake you seem to be making is you're trying to access data when you need to access the external products variable instead inside do_stuff and do_more_stuff. — user5734311
– user5734311, Commented Aug 4, 2020 at 18:41

user2263572 · Accepted Answer · 2020-08-04 01:14:30Z

1

I believe you are looking for something like this:

function get_json(cb) {
    $.getJSON("products.json", function(data) {
      cb(data);
    });  
}

function cb(data) {
    // do stuff here if you want
    console.log(data)
}

get_json(cb)

Create a callback function cb (or call it do_stuff if you'd like). Pass a reference to that function to your async function (get_json). When the async operation is complete, call your callback function with the data you received.

answered Aug 4, 2020 at 1:14

user2263572

5,6165 gold badges40 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Karl Schneider Over a year ago

Thank you - this was exactly what I needed to see in order to understand!

Collectives™ on Stack Overflow

Read json file as javascript variable on page load

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related