Estoy configurando todas mis variables antes de comenzar a llamar a otras funciones. Para eso necesito gridData de la base de datos. Uso AJAX para extraer esos datos y uso variables GET para usar en la consulta de la base de datos.

 function loadPage() { console.log("loading Page"); //prepare Data let _GET = pullGET(); let gridID = _GET.get("gridID"); let gridData = pullGridData(gridID); console.log(gridData); //start rending the Page }

Cuando intento consolar el registro de GridData, me da "indefinido".

 function pullGridData(gridID) { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) { let DATA = JSON.parse(this.responseText); console.log(DATA[0]); return DATA[0]; } }; xhttp.open("POST", "action/PullGridData.php", true); xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); var header = "gridID=" + gridID; //console.log(header); xhttp.send(header); }

Es extraño que cuando registro en la consola los "DATOS" que estoy tratando de pasar, obtengo lo que esperaba.

Soy consciente de que jQuery podría tener una buena solución, pero estoy tratando de implementar esto solo con JS puro para poder seguir aprendiendo.