Vfrdtyky

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.

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.

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

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

You have two issues in your code:

1. 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.


2. 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.