XMLHTTP Request JSON undefined

Hallo Zusammen,

ich möchte einen Request auf eine JSON machen. Soweit funktioniert dieser auch.
Nun brauch ich das Ergebnis aber in einer Variablen. Dabei habe ich den Wert über einen Callback zurückgegeben, was auch soweit funktioniert.

Weise ich diese mit einem Return nun einer variablen zu bekomme ich immer undefined. Irgendwo habe ich hier noch einen hänger

MfG

Florian86

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 1290917767

Url: https://administrator.de/contentid/1290917767

Ausgedruckt am: 26.11.2024 um 08:11 Uhr

6 Kommentare

Neuester Kommentar

Hallöle,

also dein console.log(data); in der letzten Zeile versucht eine Variable auszugeben, die in dem Moment noch keinen Inhalt hat.

Mit dem Aufruf von jsonMat(...) wird ja ein asynchroner Request angetreten - der läuft dann. Dann wird das console.log(data) ausgegeben, während jsonMat(...) noch garnicht fertig ist ist.

Jedenfalls erklär ich mir das so .

MfG E

Ok und wie bekommt man den Wert dann nun in eine Variable? Woher weis ich wann der Vorgang abgeschlossen ist?

Der Vorgang ist dann abgeschlossen, wenn die angegebene Callback-Funktion aufgerufen wird. Das heißt: Innerhalb der Callback-Funktion sollte die Variable "data" gefüllt sein.

Dass das console.log(data); ein "undefined" ausgibt, kommt durch die asynchrone Ausführung zustande, weil der Code an der Stelle quasi weiterläuft und nicht wartet.

Alternativ und (deprecated) kann man den XhrRequest synchron ausführen lassen, dann wird gewartet bis das Ergebnis da ist. Aber da kann beispielsweise den Browser blockieren.

Vorschlag
Wickle alles was passieren soll, sobald die Daten da sind in eine Funktion, die dann als Callback vom XHRRequest aufgerufen wird.

Auch interessant: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Synchron ...

hmm das ist schwierig da ich 2-3 JSON Files in eine variablen speichern muss, um diese während der
weiteren funktionen auszuwerten.

habe mir jetzt mit einem settimeout beholfen. ist zwar nicht die sauberste lösung aber es funktioniert erstmal.

danke für die infos.

MfG

Florian86

Jetzt hab ich es verstanden mit dem Callback

.
Ich übergebe das Ergebnis meiner async Funktion also an den Callback, den ich dann in meiner Hauptfunktion habe und jeden weiteren Code muss ich in diesem Funktionsaufruf mit einbauen bzw bei mehreren Callbacks dann dort wieder.

function jsonLoad(uri,callback){
        
        var xhr = new XMLHttpRequest();
        xhr.overrideMimeType("application/json");  
        xhr.open('GET',uri,true);  
        xhr.onload = function () {
            if (xhr.status === 200) {
                try {
                    callback(xhr.responseText);
                }
                catch (e) {
                    console.log(`Error: ${e}`);
                }
            }
            else {
                console.log('Status not 200 - OK from response!');  
            }

        };
        xhr.send();
    
}       

jsonLoad('./data/matBestand.json',function(result){  
    var matBestand = JSON.parse(result);    

            jsonLoad('./data/shipmentData.json',function(result){  
            var ship = JSON.parse(result);    
    
    


        console.log(matBestand);
        console.log(ship);
        });
    });