d3.json() function returns undefined

Question

I have a question for my application logic in d3.js. I send an ajax request(some json data) from client to server and in the server(nodejs) I save into a file. Then I try to fetch json data via the following command.

        d3.json("nodes.json", function(error, json) {
        if(error)
        {
            console.warn('nodes.json error', error);
            //throw error;
        }
        console.log("d3.json");
        savedNodesLinks = json;
    });
    console.log('parsed', JSON.parse(JSON.stringify(savedNodesLinks || null)));
    if(JSON.parse(JSON.stringify(savedNodesLinks || null)) != null)
    {
        links = JSON.parse(JSON.stringify(savedNodesLinks || null)).links;
        nodes = JSON.parse(JSON.stringify(savedNodesLinks || null)).nodes;
    }

This function which consists above-mentioned code snippet is called by a button. When I click the button first time, 'savedNodesLinks' variable shows as an undefined. When I push the button second time, data comes in a robust way. How can I fix this issue? I debugged the code but I couldn't find the problem

Thanks in advance,

The d3.json() call is asynchronous, meaning it doesn't get the json right away. When the json is available the function where you have your console.log("d3.json") is called. At that point it is available. Meantime your console.log() call after d3.json() is called (before your json is available), so savedNodesLinks is not yet defined. I would suggest reading up on asynchronous calls in javascript to better understand this. — rasmeister
– rasmeister, Commented Mar 9, 2017 at 22:42

Tito · Accepted Answer · 2017-03-10 13:55:30Z

1

savedNodeLinks is used outside the scope try using your code inmediatelly after saveNodesLinks = json.

Because console.log('parsed', ... will occur before actually server returns the nodes.json file

    d3.json("nodes.json", function(error, json) {
    if(error)
    {
        console.warn('nodes.json error', error);
        //throw error;
    }
    console.log("d3.json");
    savedNodesLinks = json;
    console.log('parsed', JSON.parse(JSON.stringify(savedNodesLinks || null)));
    if(JSON.parse(JSON.stringify(savedNodesLinks || null)) != null)
    {
        links = JSON.parse(JSON.stringify(savedNodesLinks || null)).links;
        nodes = JSON.parse(JSON.stringify(savedNodesLinks || null)).nodes;
    }
});

It's not about d3.js, it's about javascript asynchronous programming. Check Introduction to asynchronous JavaScript

edited Mar 10, 2017 at 13:55

answered Mar 9, 2017 at 22:38

Tito

3654 silver badges9 bronze badges

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

1 Comment

zoint Over a year ago

What do you mean try using your code immediately after saveNodesLinks=json?

Collectives™ on Stack Overflow

d3.json() function returns undefined

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related