florian86
Sep 22, 2021, updated at 16:23:58 (UTC)
view1606
view6
0
Goto Top

XMLHTTP Request JSON undefined

GermansolvedQuestionWeb DevelopmentDevelopment
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 face-sad

undefined

MfG

Florian86
comment-contentCommentShareShare
Share on Facebook Share on Twitter Share on Reddit Share on Linkedin

Content-Key: 1290917767

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

Printed on: April 16, 2024 at 07:04 o'clock

6 Comments
Latest comment
Goto Top
Member: ErikM87
ErikM87 Sep 22, 2021 at 08:32:33 (UTC)
Goto Top
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
Member: Florian86
Florian86 Sep 22, 2021 at 08:46:15 (UTC)
Goto Top
Ok und wie bekommt man den Wert dann nun in eine Variable? Woher weis ich wann der Vorgang abgeschlossen ist?
Member: ErikM87
Solution ErikM87 Sep 22, 2021 updated at 09:48:19 (UTC)
Goto Top
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 ...
Member: Florian86
Florian86 Sep 22, 2021 at 10:18:47 (UTC)
Goto Top
hmm das ist schwierig da ich 2-3 JSON Files in eine variablen speichern muss, um diese während der
weiteren funktionen auszuwerten.
Member: Florian86
Florian86 Sep 22, 2021 at 11:55:31 (UTC)
Goto Top
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
Member: Florian86
Florian86 Sep 23, 2021 at 05:49:20 (UTC)
Goto Top
Jetzt hab ich es verstanden mit dem Callback face-smile.
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);
        });
    });
GermansolvedQuestionWeb DevelopmentDevelopment