JSON parsing issue with Javascript

Question

I have a (probably) silly problem, but I can't undertand what's wrong ...
I request an AWS API Gateway URL, I have a json-formatted response, I parse it, but then when I want to get the value of a specific JSON element I get "undefined" instead of the element's value.

Here is my code :

var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == XMLHttpRequest.DONE) {
            jsonData = JSON.parse(xhr.responseText);
            data = jsonData.coord;
            document.write(data);
        }
    }
    xhr.open('GET', "https://[mon-url]", true);
    xhr.send();

The API response is parsed using

jsonData = JSON.parse(xhr.responseText)
document.write(jsonData)

give the following output :

{
  "coord": {
    "lon": 2.35,
    "lat": 48.85
  },
  "weather": [
    {
      "id": 800,
      "main": "Clear",
      "description": "clear sky",
      "icon": "01n"
    }
  ],
  "base": "stations",
  "main": {
    "temp": 291.97,
    "pressure": 1019,
    "humidity": 56,
    "temp_min": 288.15,
    "temp_max": 295.15
  },
  "visibility": 10000,
  "wind": {
    "speed": 3.1,
    "deg": 60
  },
  "clouds": {
    "all": 0
  },
  "dt": 1495747800,
  "sys": {
    "type": 1,
    "id": 5615,
    "message": 0.0022,
    "country": "FR",
    "sunrise": 1495684591,
    "sunset": 1495741168
  },
  "id": 2988507,
  "name": "Paris",
  "cod": 200
}

But if I try to get a specific element's value, for example using document.write(jsonData.coord) I get "undefined" as a value.

Can someone help me understand why I can't correctly parse my JSON data ?

Thanks !

Can you also log the type of jsonData? console.log(typeof(jsonData)) — Rajesh Dixit
– Rajesh Dixit, Commented May 29, 2017 at 8:05
@prasad, shouldn't make any difference if the data OP has added is in correct format — Shubham Khatri
– Shubham Khatri, Commented May 29, 2017 at 8:06
use jsonData = JSON.parse(JSON.stringify(xhr.responseText)) — farhadamjady
– farhadamjady, Commented May 29, 2017 at 8:06
make jsonData a local variable. Where else do you change its value? — baao
– baao, Commented May 29, 2017 at 8:08
@Rajesh FYI, typeof is not a function, it's an operator. The brackets are just noise, console.log(typeof jsonData) is more proper. — Lennholm
– Lennholm, Commented May 29, 2017 at 8:22

Gokhan Kurt · Accepted Answer · 2017-05-29 08:11:09Z

1

The data you are getting from the server is a string of JSON data. You should either change how the response is returned, or you have to parse the JSON twice.

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == XMLHttpRequest.DONE) {
        jsonData = JSON.parse(xhr.responseText);
        jsonData = JSON.parse(jsonData);
        data = jsonData.coord;
        document.write(data);
    }
}
xhr.open('GET', "https://[mon-url]", true);
xhr.send();

answered May 29, 2017 at 8:11

Gokhan Kurt

8,3151 gold badge30 silver badges55 bronze badges

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

5 Comments

Lennholm Over a year ago

This is the correct conclusion and it's proved by the fact that document.write(jsonData) prints a JSON string instead of [object Object]

François Over a year ago

Ok, it works now, thanks a lot for the explanation !

beano Over a year ago

'You should either change how the response is returned, or you have to parse the JSON twice.' I am stringifying the response before returning it to the client side. What is the best way to return a response to prevent having to parse it twice?

Gokhan Kurt Over a year ago

@beano Depends, what server side framework are you using?

beano Over a year ago

@GökhanKurt I am using Javascript on both client and server (Google Apps Script).

koszyq · Accepted Answer · 2017-05-29 08:10:41Z

0

use JSON.parse if response is a string

answered May 29, 2017 at 8:10

koszyq

1511 silver badge7 bronze badges

Collectives™ on Stack Overflow

JSON parsing issue with Javascript

2 Answers 2

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Related