Trouble accessing JSON data

Question

I'm having some trouble accessing my JSON data with an AJAX call.

JSON

{
    "Ongoing": [
        {"name": "meh"},
        {"name": "hem"}
    ],
    "Completed": [
        {"name": "kfg"},
        {"name": "dkfgd"}
    ]
}

JS

$.ajax({
    type: "GET",
    dataType: "json",
    url: "script/projects.json",
    complete: function(data){
        for(var i = 0; i < data.Ongoing.length; i++){
            console.log(data.Ongoing[i].name);
        }

    }
})

When I write to the console, I getting the following error:

TypeError: Cannot read property 'length' of undefined

So for some reason it's kicking back that the array is undefined.

I've passed the JSON into the validator, so I know it's valid JSON. I know that jQuery's $.ajax parses JSON automatically. So I'm confused, I should be able to access the data like a normal object. Can anyone explain to me what I've done wrong and provide an explanation to how to fix it?

The following image shows what simply writing data to the console displays. enter image description here

Can you do a console log of just `data` to see what it contains? — zpr, May 12 '15 at 17:49
Sure thing. I'll add a screenshot to the question to show what writing just data shows. — , May 12 '15 at 17:51
@Robert Can you tell us what you get with `console.log(data)` ? — jmgross, May 12 '15 at 18:30
@huggilou, the image in the question shows what the console returns when writing `data`. I believe I have the problem figured out though. If I work inside the `success` function, I'm able to access the data. — , May 12 '15 at 18:56

score 0 · Answer 1 · answered May 12 '15 at 17:51

0

Your Ongoingis an array, so you have first to access at an element :

console.log(data.Ongoing[0].name);

answered May 12 '15 at 17:51

jmgross

2,306
1
20
24

1

This is correct but the TypeError is hitting `data.Ongoing` so he's not even getting that far. – zpr May 12 '15 at 17:53

score 0 · Answer 2 · answered May 12 '15 at 17:53

0

Your Ongoing property contains an array

"Ongoing": [ {"name": "meh"}, {"name": "hem"} ]

To access one you can do it by looping

$.each(data.Ongoing, function(index, value) {
   console.log(value.name);
});

answered May 12 '15 at 17:53

Robin Carlo Catacutan

13,249
11
52
85

Wouldn't simply doing a for loop accomplish the same thing? – May 12 '15 at 17:54
@Robert yeah you could do it on a for loop also – Robin Carlo Catacutan May 12 '15 at 17:56

score 0 · Accepted Answer · edited May 23 '17 at 12:24

0

You must load the file through a web server, you are loading it using file:// you can however override this in Chrome using the--allow-file-access-from-files flag

see: Trying to load local JSON file to show data in a html page using JQuery

edited May 23 '17 at 12:24

Community

1
1

answered May 12 '15 at 17:56

David Nguyen

8,368
2
33
49

Forgot I needed to be doing this within a server. I'm still not able to access the data though. I'll update the question. – May 12 '15 at 18:04
does `projects.json` exist in the same directory as the page? – David Nguyen May 12 '15 at 18:06
Yes it does and I noticed that the path was wrong so I fixed it as well. – May 12 '15 at 18:08
what is the result return in the network when the ajax request is sent? – David Nguyen May 12 '15 at 18:10
I'm assuming you mean the `success` function? If I do a console log in that to print 'hi' it does so. so I know that the file is being loaded. – May 12 '15 at 18:13
no under, the network tab in the inspector a new entry will be made when ajax is called. that should tell you if the file loads or not. – David Nguyen May 12 '15 at 18:16
Oh. The network tab is showing that the file is there and that it has a status of 304 – May 12 '15 at 18:18
Now, if I work inside the `success` function instead of the `complete` function, I actually get everything successfully. Should I be working inside of that function instead of `complete`? – May 12 '15 at 18:21
Ok, then that was the problem. Thanks for all the help, I'm accepting your answer since it led to the actual solution. – May 12 '15 at 18:58

score 0 · Answer 4 · answered May 12 '15 at 18:18

0

The code is good. Your problem is in the request. Check the url

answered May 12 '15 at 18:18

julian

374
2
11

can add the request response? – julian May 14 '15 at 18:54

Trouble accessing JSON data

4 Answers4