how do I read a Json File and store some data in an array and then later after reading the file access it?

Question

As show in the code below, I'am trying to read a Json File and push some values from the json file into an array, if the array is accessed within the function, the value is correctly stored

But when the callback function ends, the array is empty Why does the array not contain the values pushed?

var latArray = new Array();
var longArray = new Array();
var getLatLong = d3.json("./SRC/ratp_2013.json", function (error, data){



        for(i in data.stops)
        {
            longArray.push(data.stops[i].longitude);
            latArray.push(data.stops[i].latitude);
        }

        console.log(longArray); //Prints the Array of latitudes
        console.log(latArray);  //Prints the Array of longitudes
});
console.log(longArray); //Prints an empty array.
console.log(latArray);  //Prints an empty array.

Array doesn't contain values because you are printing those outside callback — BhagyashriK, Aug 05 '15 at 07:04
Your console values get printed before json callback is executes .. If you set timeout then you can see array will contain values. — BhagyashriK, Aug 05 '15 at 07:12

score 1 · Answer 1 · answered Aug 05 '15 at 07:00

1

It's pretty sure a async call.

Does your console first print the empty arrays and then the filled ones?

If It is an async call there should be also a 'onDataLoaded' event for this one.

answered Aug 05 '15 at 07:00

bloC

526
3
16

Yes it is an async call, Yes it prints the empty array first. How exactly do I add that event? any examples please – Venkatesh L Aug 05 '15 at 07:03
Just wrap the code, that should be executed after you received the json, into a function and then call that function in the end of d3.json(). If I should give you an exact code example, just let me know - but I think it should be fine now. – bloC Aug 05 '15 at 07:28

skl · Answer 2 · 2015-08-05T10:46:37.133

That is happening because of the asynchronous nature of the call. Execution of the program will not wait for the response and start execution from the next line. More details you can find on the link: D3 API

So in this case you can get the desired result using any one of the following options :

write your code inside the callback function
use function chain (i.e. after getting response you can make a call to some other function and write your code inside that function).

score 0 · Answer 3 · 2015-08-05T07:10:48.090

I'm guessing that d3.json is an asynchronous function.

This means that as soon as your d3.json function fire, the console.log functions are firing too. They are all being fired alongside each other.

So, while the file is being read, you're calling those console.logs.

You can:

Use the data inside of the callback.
Create a Promise (ES6)...

var d3Action = new Promise(function(resolve, reject){
  var latArray = [],
      longArray = [],
      getLatLong = d3.json("./SRC/ratp_2013.json", function (error, data){

        for(i in data.stops) {
          longArray.push(data.stops[i].longitude);
          latArray.push(data.stops[i].latitude);
        }
        resolve(longArray, latArray);

      });
});

d3Action.then(function(longArray, latArray){
  console.log(longArray, latArray)
})

score 0 · Accepted Answer · answered Aug 05 '15 at 07:02

This has to do with execution times.

The JSON call is asynchronous. that means the browser doesn't wait for it.

Your execution path looks like this:

Define arrays
call JSON
console.log arrays
recieve JSON
put information in arrays

try this instead:

var latArray = new Array();
var longArray = new Array();
var getLatLong = d3.json("./SRC/ratp_2013.json", function (error, data){



        for(i in data.stops)
        {
            longArray.push(data.stops[i].longitude);
            latArray.push(data.stops[i].latitude);
        }

        logArrays();
});
function logArrays() {
   console.log(longArray); //Prints an empty array.
   console.log(latArray);  //Prints an empty array.
}

With that the execution path is:

Define arrays
call JSON
recieve JSON
put information in arrays
call logging function
console.log arrays

score 0 · Answer 5 · answered Aug 05 '15 at 07:03

Because this:

console.log(longArray); //Prints an empty array.
console.log(latArray);  //Prints an empty array.

Is run before this:

var getLatLong = d3.json("./SRC/ratp_2013.json", function (error, data){
    for(i in data.stops)
    {
        longArray.push(data.stops[i].longitude);
        latArray.push(data.stops[i].latitude);
    }

    console.log(longArray); //Prints the Array of latitudes
    console.log(latArray);  //Prints the Array of longitudes
});

The function you passed to d3.json is performed asynchronously.

If you rewrite it like this, it should work:

function logResult() {
  console.log(longArray);
  console.log(latArray);
}

var getLatLong = d3.json("./SRC/ratp_2013.json", function (error, data){

    for(i in data.stops)
    {
        longArray.push(data.stops[i].longitude);
        latArray.push(data.stops[i].latitude);
    }
    logResult()
});

how do I read a Json File and store some data in an array and then later after reading the file access it?

5 Answers5