Cookies op Tweakers

Tweakers maakt gebruik van cookies, onder andere om de website te analyseren, het gebruiksgemak te vergroten en advertenties te tonen. Door gebruik te maken van deze website, of door op 'Ga verder' te klikken, geef je toestemming voor het gebruik van cookies. Wil je meer informatie over cookies en hoe ze worden gebruikt, bekijk dan ons cookiebeleid.

Meer informatie
Toon posts:

JavaScipt asynchronous callbacks return array

Pagina: 1
Acties:

Onderwerpen


Acties:
  • 0Henk 'm!

  • Brilsmurfffje
  • Registratie: december 2007
  • Niet online
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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?

Acties:
  • 0Henk 'm!

  • NNF
  • Registratie: november 2003
  • Laatst online: 13:48
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.

Acties:
  • 0Henk 'm!

  • Brilsmurfffje
  • Registratie: december 2007
  • Niet online
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:
1
2
3
4
5
6
7
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.

Acties:
  • 0Henk 'm!

  • Caelorum
  • Registratie: april 2005
  • Laatst online: 26-09 23:02
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;

Acties:
  • 0Henk 'm!

  • orf
  • Registratie: augustus 2005
  • Nu online
Brilsmurfffje schreef op zondag 10 mei 2015 @ 00:03:
[...]


Ja dat dacht ik ook maar als ik de volgende code gebruik:
JavaScript:
1
2
3
4
5
6
7
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:
1
2
3
4
5
6
7
8
9
10
11
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]


Acties:
  • 0Henk 'm!

  • Glodenox
  • Registratie: januari 2010
  • Laatst online: 12:35

Glodenox

Waze Global Champ

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

JavaScript:
1
2
3
4
5
6
7
8
9
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]

Coördinator van de Waze Belux Community


Acties:
  • 0Henk 'm!

  • MarcoC
  • Registratie: september 2003
  • Laatst online: 13:14
De callback is asynchroon dus de code wordt niet "regel voor regel" uitgevoerd. Dat vereist soms een iets andere denkwijze :) .

  • Brilsmurfffje
  • Registratie: december 2007
  • Niet online
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:
1
2
3
4
5
6
7
8
9
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!
Pagina: 1


Apple iPhone SE (2020) Microsoft Xbox Series X LG CX Google Pixel 4a CES 2020 Samsung Galaxy S20 4G Sony PlayStation 5 Nintendo Switch Lite

'14 '15 '16 '17 2018

Tweakers vormt samen met Hardware Info, AutoTrack, Gaspedaal.nl, Nationale Vacaturebank, Intermediair en Independer DPG Online Services B.V.
Alle rechten voorbehouden © 1998 - 2020 Hosting door True