JavaScipt asynchronous callbacks return array

[Brilsmurfffje]

Ik ben bezig met het maken van een visualisatie waarbij data vanuit een json file wordt ingelezen. Ik krijg de data succesvol in de console maar ik krijg het niet opgeslagen in een variabele zodat ik het verder kan gebruiken.

JavaScript:

function loadJSON(path, success, error)
{
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function()
    {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                if (success)
                    success(JSON.parse(xhr.responseText));
            } else {
                if (error)
                    error(xhr);
            }
        }
    };
    xhr.open("GET", path, true);
    xhr.send();
}

loadJSON('data/hubs.json',
         function(data) { console.log(data); },
         function(xhr) { console.error(xhr); }
);

De volgende regel returned de array naar de console:
console.log(data);

maar als ik hier zeg, hubs = data; waarbij hubs een globale variabele is dan werkt dit niet.

Het heeft iets met callbacks te maken maar ik kom er gewoon niet uit, iemand die mij hierbij kan helpen?

[NNF]

Als console.log werkt dan werkt opslaan als (globale) variabele ook. Ik denk eerder dat het probleem is dat je al iets met die variabele probeert te doen op het moment dat die nog niet bestaat/leeg is.

[Brilsmurfffje]

NNF schreef op zaterdag 09 mei 2015 @ 23:52:
Als console.log werkt dan werkt opslaan als (globale) variabele ook. Ik denk eerder dat het probleem is dat je al iets met die variabele probeert te doen op het moment dat die nog niet bestaat/leeg is.

Ja dat dacht ik ook maar als ik de volgende code gebruik:

JavaScript:

var hubs;
loadJSON('data/hubs.json',
         function(data) { hubs = data; },
         function(xhr) { console.error(xhr); }
);

console.log(hubs);

Dan krijg ik in de console:
undefined
en tevens een syntaxisfout op de eerste regel van de json.

[Caelorum]

Dat is omdat die regel 7 al uitvoert, voordat je de data binnen hebt gekregen die je op regel 2 opvraagt. Dan is hubs dus undefined. Verplaats die console.log maar eens naar net achter hubs = data;

[orf]

Brilsmurfffje schreef op zondag 10 mei 2015 @ 00:03:
[...]


Ja dat dacht ik ook maar als ik de volgende code gebruik:

JavaScript:

var hubs;
loadJSON('data/hubs.json',
         function(data) { hubs = data; },
         function(xhr) { console.error(xhr); }
);

console.log(hubs);

Dan krijg ik in de console:
undefined
en tevens een syntaxisfout op de eerste regel van de json.

Dat klopt precies met wat NNF zegt. Je probeert iets met een variabele te doen voordat je functie is uitgevoerd.

Het 2e en 3e argument van de functie loadJSON is een callback. Dat wil zeggen dat die functie aangeroepen wordt (op regel 9 en 12 van je script in de TS), als de data opgehaald is. De titel van dit topic heb je goed gekozen. Je script wordt asynchroon uitgevoerd.

Zo zal het wel werken:

JavaScript:

loadJSON('data/hubs.json',
         function(data) { 
             var hubs = data;
             log(hubs); 
         },
         function(xhr) { console.error(xhr); }
);

function log(var){
    console.log(var);
}

[ Voor 25% gewijzigd door orf op 10-05-2015 00:12 ]

[Glodenox]

+1 wat orf zegt. Verder kan je ook bestaande (of nieuwe) functies gebruiken om als call-back functie te gebruiken, en wel zo:

JavaScript:

loadJSON('data/hubs.json',
         hubsLoaded,
         function(xhr) { console.error(xhr); }
);

function hubsLoaded(hubs) { 
    console.log(hubs);
    // verdere verwerking binnen deze functie
}

Dat lijkt me wat beter leesbaar.

[ Voor 8% gewijzigd door Glodenox op 10-05-2015 08:53 ]

[MarcoC]

De callback is asynchroon dus de code wordt niet "regel voor regel" uitgevoerd. Dat vereist soms een iets andere denkwijze .

[Brilsmurfffje]

Glodenox schreef op zondag 10 mei 2015 @ 01:32:
+1 wat orf zegt. Verder kan je ook bestaande (of nieuwe) functies gebruiken om als call-back functie te gebruiken, en wel zo:

JavaScript:

loadJSON('data/hubs.json',
         hubsLoaded,
         function(xhr) { console.error(xhr); }
);

function hubsLoaded(hubs) { 
    console.log(hubs);
    // verdere verwerking binnen deze functie
}

Dat lijkt me wat beter leesbaar.

Met deze is het gelukt, bedankt voor de hulp!