Returning json data from a javascript function

Question

The following function reads JSON data from a file.

function getJsonData(){

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function (){
   if(xhttp.readyState == 4 && xhttp.status == 200){
    var javaobj = JSON.parse(xhttp.response);
    return javaobj;
   }
  }

  xhttp.open("GET", "json_output.json", true)
  xhttp.send();
}

When getJsonData is called in the following,it returns undefined

function CreateTableFromJSON() { 
  var myBooks = getJsonData();
  alert(myBooks)//returns undefined
}

`XMLHttpRequest` is asynchronous, so `getJsonData` returns before the request has completed. — Maxime Launois, May 13 '19 at 12:23
To acheive something like this its better to use fetch together with async/await — maaajo, May 13 '19 at 12:24
[How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Sudhir Ojha, May 13 '19 at 12:24

score 1 · Answer 1 · answered May 13 '19 at 12:24

function getJsonData(cb) {

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function () {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      var javaobj = JSON.parse(xhttp.response);
      cb(javaobj);
    }
  }
  xhttp.open("GET", "json_output.json", true)
  xhttp.send();

}

function CreateTableFromJSON() {

  getJsonData(function(myBooks){
    alert(myBooks)
  });

}

You can use javascript callback

function getJsonData() {
  return new Promise(resolve => {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
      if (xhttp.readyState == 4 && xhttp.status == 200) {
        var javaobj = JSON.parse(xhttp.response);
        resolve(javaobj);
      }
    }
    xhttp.open("GET", "json_output.json", true)
    xhttp.send();
  })


}

async function CreateTableFromJSON() {

  var myBooks = await getJsonData();
  alert(myBooks)

}

Or you can use Promise/async/await

function getJsonData() {
  return new Promise(resolve => {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
      if (xhttp.readyState == 4 && xhttp.status == 200) {
        var javaobj = JSON.parse(xhttp.response);
        resolve(javaobj);
      }
    }
    xhttp.open("GET", "json_output.json", true)
    xhttp.send();
  })
}

function CreateTableFromJSON() {
  getJsonData().then(myBooks => alert(myBooks))
}

Or, we can use then for Promise

Returning json data from a javascript function

1 Answers1