Code is not displaying JSON data

Question

Hey guys I am trying to make a request to a JSON page, grabbing the data, then displaying it to my console but it is giving me "undefined". Why is that?

Here is the code and then the JSON page will be posted under it:

(function Apod() {
    var api_key = 'NNKOjkoul8n1CH1NoUFo',
        url = 'https://api.nasa.gov/planetary/apod' + "?api_key=" + api_key,
        data;
    var apodRequest = new XMLHttpRequest();
    apodRequest.onreadystatechange = function() {
        if (apodRequest.readyState === 4 && apodRequest.status === 200) {
            var response = apodRequest.responseText;
            var parsedAPOD = JSON.parse(response);
            data += parsedAPOD;
            for (i = 0; i < parsedAPOD.length; i++) {
                data += parsedAPOD[i];
                console.log("Parsing lines: <br>" + parsedAPOD[i]);
            }

        }
        apodRequest.open("GET", url, true);
        apodRequest.send(null);
    }
}());

JSON page parsing:

{
  "date": "2016-11-05",
  "explanation": "Shot in Ultra HD, this stunning video can take you on a tour of the International Space Station. A fisheye lens with sharp focus and extreme depth of field provides an immersive visual experience of life in the orbital outpost. In the 18 minute fly-through, your point of view will float serenely while you watch our fair planet go by 400 kilometers below the seven-windowed Cupola, and explore the interior of the station's habitable nodes and modules from an astronaut's perspective. The modular International Space Station is Earth's largest artificial satellite, about the size of a football field in overall length and width. Its total pressurized volume is approximately equal to that of a Boeing 747 aircraft.",
  "media_type": "video",
  "service_version": "v1",
  "title": "ISS Fisheye Fly-Through",
  "url": "https://www.youtube.com/embed/DhmdyQdu96M?rel=0"
}

What exactly is showing undefined? The response is an object, not an array, so it doesn't have a length. The loop shouldn't run at all. — JJJ, Nov 05 '16 at 23:18
@MamdouhFreelancer [do not use `for...in`](http://stackoverflow.com/questions/500504/why-is-using-for-in-with-array-iteration-a-bad-idea) — VLAZ, Nov 05 '16 at 23:22
it's hard to tell because of your indenting, but `apodRequest.open(...)` is inside the `onreadystatechange` handler so will never get executed — JVDL, Nov 05 '16 at 23:23
@MamdouhFreelancer I thought you were suggesting `for...in` if it was an array. Apologies if I misunderstood. — VLAZ, Nov 05 '16 at 23:30
@Chris test this https://jsfiddle.net/MamdouhFreelancer/1then2fk/ — Mamdouh Saeed, Nov 05 '16 at 23:35

score 2 · Answer 1 · answered Nov 05 '16 at 23:38

You have a few errors in your code.

First off, the general structure of it should be like this

(function Apod() {
    var api_key = 'NNKOjkoul8n1CH1NoUFo',
        url = 'https://api.nasa.gov/planetary/apod' + "?api_key=" + api_key,
        data;
    var apodRequest = new XMLHttpRequest();
    apodRequest.onreadystatechange = function() {
        //Code here
    };
    apodRequest.open("GET", url, true);
    apodRequest.send(null);
}());

Notice how I moved apodRequest.open("GET", url, true); and apodRequest.send(null); outside of the onreadystatechange handler.

Secondly, instead of

apodRequest.onreadystatechange = function() {
    if (apodRequest.readyState === 4 && apodRequest.status === 200) {
        //Code here
    }
}

you can simply do

apodRequest.onload = function() {
        //Code here
};

As it's the event that will fire when a response is returned. So you don't need the if check inside.

Finally, inside the onload handler, you have a few mistakes, such as:

data += parsedAPOD; this is wrong because data is an ~~object~~ undefined up to this point and parsedAPOD is an object. ~~Doing += between two objects will not merge them. If you want to merge two objects there are other ways, e.g. Object.assign~~
for (i = 0; i < parsedAPOD.length; i++) { ... } is wrong because parsedAPOD is an object. Objects do not have a length property, so this is not the correct way to iterate over it. Use for ... in ... loop instead
data += parsedAPOD[i]; is, again, wrong, because this is not the way to merge objects.
parsedAPOD[i] is wrong because i is an integer, in this case, so parsedAPOD[i] is simply undefined.

Hope this analysis helps you correct your code.

score 1 · Answer 2 · answered Nov 05 '16 at 23:38

1

first of all parsedAPOD is an object and parsedAPOD.length is not valid. You can use for in loop to iterate through an object as below.

for (var i in parsedAPOD) {
    data += parsedAPOD[i];
    console.log("Parsing lines: <br>" + parsedAPOD[i]);
}

answered Nov 05 '16 at 23:38

Anoop Mundathan

235
3
5
12

Code is not displaying JSON data

2 Answers2