JavaScript Variable nicht definiert

[Woodz]

Hallo.

Ich versuche mit Hilfe von AJAX Daten aus meiner Datenbank zu laden und diese Werte einer Variablen zu übergeben. Allerdings habe ich das Problem, dass die Werte scheinbar nicht zurück gegeben werden.

function getData(kennziffer,parameter,termin){

    var ajax = new XMLHttpRequest();
    var method = "GET";
    var url = "loadDataForDiagramm.php?parameter=" + parameter + "&kennziffer=" + kennziffer + "&termin=" + termin;
    var asynchronous = true;
                                      
    ajax.open(method, url, asynchronous);
                    
    ajax.send();

    ajax.onreadystatechange = function(){
        if (this.readyState == 4 && this.status == 200){
            data = JSON.parse(this.responseText);

            return data;
        }
 
    }

}

function setElements(parameter,kennziffer,termin){
    
    var data = getData(kennziffer,parameter, termin);
    console.log(data);
}

Am Ende wird mir immer gesagt, dass die variable data "undefined" ist!
Ich glaube/vermute, dass es was mit der Rückgabe von Werten innerhalb einer asyncronen Funktion zu tun hat, weiß mir hier allerdings nicht zu helfen.

Beste Grüße,
Woodz

 

[new Account()]

die Funktion getData gibt data gar nicht zurück.

In Zeile 12ff. setzt du lediglich den Handler auf eine bestimmte Funktion.
In der Funktion, welche von dir gar nicht aufgerufen wird, hast du data zur Verfügung.

Wenn du console.log(data in Zeile 15 packst, würde data vermutlich ausgegeben werden.

 

[Woodz]

Ja, würde es. Aber wie bekomm ich es hin, dass ich data, wie in diesem Fall, in einer anderen Funktion abrufen kann?

 

[new Account()]

Du kannst die andere Funktion in Zeile 15 aufrufen und data als Parameter übergeben oder data in Zeile 15 irgendwo außerhalb abspeichern.

 

[blablub1212]

Auch wenn du den Tipp von new Account() befolgst wird dein console.log() leer bleiben. Wenn du sowas mit JavaScript machen willst, dann musst du mit Promises arbeiten. Denn der Funktionsaufruf erfolgt gleichzeitig zu console.log().

Falls ES6 für dich auch in Frage kommt, dann kannst du auch async nutzen.

 

[Yuuri]

Willkommen in JavaScript und der Callback Hell. Du musst einen Callback übergeben, an welchen die Daten übergeben werden.

function getData(kennziffer,parameter,termin, /* --> */ onSuccessCallback){

    var ajax = new XMLHttpRequest();
    var method = "GET";
    var url = "loadDataForDiagramm.php?parameter=" + parameter + "&kennziffer=" + kennziffer + "&termin=" + termin;
    var asynchronous = true;

    ajax.open(method, url, asynchronous);

    ajax.send();

    ajax.onreadystatechange = function(){
        if (this.readyState == 4 && this.status == 200){
            data = JSON.parse(this.responseText);

            /* --> */ onSuccessCallback( data );
        }

    }

}

function setElements(parameter,kennziffer,termin){

    getData(kennziffer,parameter, termin, /* --> */ function( data )
    {
        console.log( data );
    });
}

Statt XHR solltest du dir aber mal fetch() ansehen, was deutlich leichter ist und auch mit Promises arbeitet.

 

[Woodz]

Wooaah! Nicht doch! Ich war doch schon in der JavaScript "date"-Hell.