d3.js cannot assign loaded json data to a variable

Question

I am trying to load an external json file to d3.js, but everytime I try to assign the loaded data to a variable (so later I can use it with data();) it gives me undefined at console.log. I feel like I tried everything but I cannot assign the data to a variable, not sure what is wrong here.

var dataset

function checkIt(data){
for (var i in data) {
            var data_clean;
            data_clean = data[i].Total
            dataset = data_clean

        }

        }
console.log(dataset)

d3.json("data.json", checkIt);

The dataset

[
  {
    "Continent":"Europe",
    "Country_Names":"Albania",
    "Total":3.8
  },
  {
    "Continent":"Europe",
    "Country_Names":"Armenia",
    "Total":5.4
  },
  {
    "Continent":"Europe",
    "Country_Names":"Austria",
    "Total":64.7
  },
  {
    "Continent":"Europe",
    "Country_Names":"Azerbaijan",
    "Total":29.3
  }]

score 1 · Accepted Answer · answered Nov 05 '15 at 23:51

1

d3.json is asynchronous (that means checkIt will fire in the future event frame. Not in the current event frame). You must do console.log(dataset) inside checkIt function, not outside of it. Where you call it right now happens before checkIt is called.

answered Nov 05 '15 at 23:51

sergeyz

1,339
10
14

But when I use dataset later in svg.selectAll("path").data(dataset); it gives me error Cannot read property 'length' of undefined, i guess it is related to dataset not being read? – Imo Nov 05 '15 at 23:59
Look up asynchronous JavaScript online. Just because you use svg.selectAll("path").data(dataset) later in the code doesn't mean it will happen after d3.json returns you the data from the server. Try putting all you rendering logic inside checkIt. If you server is working properly and d3.json is able to find the file on a disc, then everything should work smoothly. You can test if you get data from the server just by running console.log(data) inside the checkIt function. – sergeyz Nov 06 '15 at 00:09
try this. console.log('1'); setTimeout(function(){ console.log('3'); }, 0); console.log('2'); This will illustrate what happens in your code. – sergeyz Nov 06 '15 at 00:12
d3 is able to find the json file, because when I console.log from inside checkit--> for loop it renders correct values I jsut cant seem to get the values outside checkit – Imo Nov 06 '15 at 00:17
And you'll never be able to. That is Asynchronous JavaScript. Create a function that encompasses all your rendering logic and call it inside checkIt function. – sergeyz Nov 06 '15 at 00:20
ah ok got it now thanks a lot – Imo Nov 06 '15 at 00:27

score 0 · Answer 2 · answered Nov 05 '15 at 23:52

A more efficient method of saving data for later is to use localstorage. in practice this can be used like so:

function save() {
    savefile['userList'] = userList
    savefile['Users'] = Users
    savefile['qwerty'] = qwerty
    saved = LZString.compressToBase64(JSON.stringify(savefile))
    localStorage.setItem('puppy',saved);
    update();
};
function load() {
    savefile = JSON.parse(LZString.decompressFromBase64(localStorage.getItem('puppy')))
    Users = savefile.Users
    userList = savefile.userList
    qwerty = savefile.qwerty;
    title();
    update();
};
function autosave() {
    qwerty = qwerty + 1;
    save();
    setTimeout(autosave, 60000);
    update();
}

d3.js cannot assign loaded json data to a variable

2 Answers2