Javascript / Json Requested Object returns null

Question

i'm trying to access a local JSON File with JS, turn it into an JS Object by parsing it and logging it to the console. I'm using Live Server in VS Code to set up the Server, therefore the localhost URL.

    var requestURL = "http://localhost:5500/sqVol.json";
    var request = new XMLHttpRequest();

    request.open('GET', requestURL);
    request.responseType = 'json';
    request.send();

    var jsonObj = request.response;
    request.onload = function () {
    JSON.parse(jsonObj);
    logData(jsonObj);
    };

    function logData(jsonObj){
      console.log("jsonObj= " + jsonObj);
      //console.log("jsonObj[Datum]= " + jsonObj[Datum]);
      //console.log("jsonObj.Datum= " + jsonObj.Datum);
    }

Output: jsonObj= null

The JSON File:

  {
    "Datum": ["03.05.2017","05.06.2017"],
    "Volume": [1338,1445]
  }

Here's what I imagine happens: I'm getting the Answer from localhost and parsing it via JSON.parse into an JS Object. As soon as the request finished im calling my logData function and passing the parsed Data to log it.

Possible duplicate of [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) — connexo, Nov 16 '18 at 07:05
You're just parsing JSON too many times. remove one JSON.parse and you might get it right because JSON.parse expects a string and you're passing an object. — Mani Kumar Reddy Kancharla, Nov 16 '18 at 07:06
`var jsonObj = JSON.parse(request.response);` at this time `response` is `null` or `undefined`. You fail to understand the asynchronous nature of your call. — connexo, Nov 16 '18 at 07:07
Removed it - doesn't change anything unfortunately. edit: and put parse into the onload function. No change either. :( — Aa Ron, Nov 16 '18 at 07:07
`var jsonObj = request.response;` is still null. You fail to understand the asynchronous nature of your call. — connexo, Nov 16 '18 at 07:10
@AaRon you have given `responseType = "json"` already before sending the request so `request.response` is already a javascript object and not a JSON string. So ignore all the code after `request.send()` and just use `console.log(request.response)` inside `onload` function which should be declared **bold** before `request.send()` executes. — Mani Kumar Reddy Kancharla, Nov 16 '18 at 07:12
@connexo: you pointed me in the right direction - Thanks! I'll try to handle the request first, make sure the data is received and process it afterwards. Like so: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests — Aa Ron, Nov 16 '18 at 07:26
@Mani Kumar Reddy Kancharla: Thanks! It solved it - ill paste the working Code as answer. — Aa Ron, Nov 16 '18 at 07:26

Aa Ron · Answer 1 · 2018-11-16T07:43:03.807

As @connexo pointed out I didn't understand the asynchronous nature of the call. And frankly i still don't but i guess a good starting points will be:

How do I return the response from an asynchronous call?

MDN Synchronous and Asynchronous Requests

As @Mani Kumar Reddy Kancharla pointed out my response is already a JS Object since i declared request.responseType = 'json';

This is how it looks right now:

var requestURL = "http://localhost:5500/sqVol.json";
var request = new XMLHttpRequest();

request.open('GET', requestURL);
request.responseType = 'json';
request.send();

request.onload = function () {
console.log(request.response);
var jsonObj = request.response;
logData(jsonObj);
};

function logData(jsonObj){
  console.log("jsonObj= " + jsonObj);
  console.log("jsonObj[Datum]= " + jsonObj.Datum);

Ouput: {…} Datum: Array [ "03.05.2017", "05.06.2017" ] Volume: Array [ 1338, 1445 ]

jsonObj= [object Object]
jsonObj[Datum]= 03.05.2017,05.06.2017

As you can see i can also access the .Datum Property. I Consider it solved. Thank you!

edit: Added the link provided by connexo.

Hey @AaRon checkout my answer, it also solves the jsonObj issue by declaring it before onload function rather than inside onload function to solve the scope issue so that it can be used inside logData function — Mani Kumar Reddy Kancharla, Nov 16 '18 at 07:52

Mani Kumar Reddy Kancharla · Answer 2 · 2018-11-16T07:54:55.473

You have two issues in your code:

You're using JSON.parse() too many times on same date which is already converted from JSON string to a JavaScript object and tries to parse a Javascript object raising a Syntax error. You've already mention request.responseType = 'json' i.e. responseType specifies you're receiving a JSON string as response so JavaScript Engine will already parse it and provide you a JavaScript object as request.response and you need not parse it. So you could use JSON.parse(request.responseText) if you want to parse it yourselves or directly use request.response as a JavaScript object.
You're trying to store request.response into a variable outside the load function which will just provide the value of request.response at that time which could be null if the response is not received yet. You need to get the response in the onload fucntion implementation as it is executed once you receive the response.

So what you're looking for overall is this ->

var requestURL = "http://localhost:5500/sqVol.json";
var request = new XMLHttpRequest();
var jsonObj;

function logData(jsonObj){
  console.log("jsonObj= " + JSON.stringify(jsonObj));
  console.log("jsonObj[Datum]= " + JSON.stringify(jsonObj["Datum"]));
  console.log("jsonObj.Datum= " + JSON.stringify(jsonObj.Datum));
  // or simply
  console.log(jsonObj);
  console.log(jsonObj['Datum']);
  console.log(jsonObj.Datum);
}

request.onload = function () {
  jsonObj = request.response;
  logData(jsonObj);
};

request.responseType = 'json';

// finally send the request
request.open('GET', requestURL);
request.send();

Here JSON.stringify() converts a JavaScript Object back to a JSON string.

Refer to this link to get more information on how to use XMLHttpRequest

EDIT: Referring to another answer posted, people simply use libraries like jQuery AJAX to make asynchronous requests to get data from the web, especially in XML or JSON format.

score 0 · Answer 3 · answered Nov 16 '18 at 07:53

0

I used the browser XMLHttpRequest object for Ajax about 12 years ago.

https://api.jquery.com/jquery.getjson/

answered Nov 16 '18 at 07:53

Dudeman3000

551
8
21

Javascript / Json Requested Object returns null

3 Answers3