0

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.

8
  • 1
    Possible duplicate of How do I return the response from an asynchronous call? Commented Nov 16, 2018 at 7: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. Commented Nov 16, 2018 at 7: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. Commented Nov 16, 2018 at 7:07
  • Removed it - doesn't change anything unfortunately. edit: and put parse into the onload function. No change either. :( Commented Nov 16, 2018 at 7:07
  • 1
    @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. Commented Nov 16, 2018 at 7:12

3 Answers 3

1

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.

Sign up to request clarification or add additional context in comments.

1 Comment

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
0

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

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

Comments

0

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.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.