通过JQuery AJAX请求收到的数据有什么问题？

Question

I'm making an API call with this code:

$.ajax({
    type: "GET",
    url: "https://example/example.json",
    beforeSend: function(xhr) {
        xhr.setRequestHeader("apikey", "user")
    },
    success: function(data){
        alert(data.folder.item);
    }
})

That returns nothing, except for an error in the console saying:

"Uncaught TypeError: Cannot read property 'item' of undefined"

The JSON data looks like this when I use the url in the browser:

{
    "folder": {
         "item": 123123,
         "item 2": false,
         "item 3": "content",
         "item 4": [
             {
               "subitem": "content"
             },
             {
                "subitem": "content2"
             }
         ]
    }
}

I was expecting "123123" in the alertbox, but nope. So what am I doing wrong?

Answer 1

If its a JSON string you are getting it will need to be parsed. Try this:

$.ajax({
    type: "GET",
    url: "https://example/example.json",
    beforeSend: function(xhr) {
        xhr.setRequestHeader("apikey", "user")
    },
    success: function(data){
        var parsed = JSON.parse(data);
        alert(parsed.folder.item);
    }
});

Or to force jquery to parse it for you:

$.ajax({
    type: "GET",
    url: "https://example/example.json",
    dataType: 'json',
    beforeSend: function(xhr) {
        xhr.setRequestHeader("apikey", "user")
    },
    success: function(data){
        alert(data.folder.item);
    }
});