jQuery getJSON Undefined Error

Question

Alright, so I've done a bit of searching and trying with no luck. I'm hoping that someone here can point me in the right direction. I have a JSON feed that I'm working with, which is supposed to output a variety of data. Currently, it just sends back and "UNDEFINED" response for all variables. Here is the JS I'm using:

$("#loaduserdata").click(function(){
$("#userdata tbody").html("");
    $.getJSON("trendFetch", function(data){
            $.each(data.list, function(i, data){
                var jsondata = data.action;
                console.log (jsondata);
            });
     }
);

I'm not sure where the problem exists, because console isn't giving me any kind of errors or any reason to think that the JSON isn't formatted correctly: http://i.imgur.com/ySpdR.png

For whatever it's worth, here is the code I'm using to generate the JSON - maybe there is an issue on that end?

$curl = curl_init();
$url = 'http://api.site.com';

curl_setopt_array($curl, array(
    CURLOPT_RETURNTRANSFER => 1,
    CURLOPT_URL => $url
));

$resp = curl_exec($curl);

if($resp){
    echo $resp;
    header("Content-Type: application/json", true);
}
else {
    echo 'Error - no response!';
}

curl_close($curl);  

EDIT - including JSON output:

{
"status": "ok",
"list": {
    "list_id": "2gz",
    "title": "Test List",
    "description": "description text...",
    "image": [
        "http://t2.gstatic.com/images?q=tbn:ANd9GcTz6_4aV6oHsI2kgJRRoSFCTWbew5ChTeBrAmXYh4Gez2J7usm8nwMOsA",
        "http://cdn.list.ly/logos/default-list-image.png"
    ],
    "views": 0,
    "item_count": 1,
    "curator_count": 1,
    "follower_count": 1,
    "listly_url": "http://api.list.ly/list/2gz-test-list",
    "items": [
        {
            "item": {
                "name": "Link 1",
                "image": "http://t2.gstatic.com/images?q=tbn:ANd9GcTz6_4aV6oHsI2kgJRRoSFCTWbew5ChTeBrAmXYh4Gez2J7usm8nwMOsA",
                "note": null,
                "url": null,
                "likes": 0,
                "dislikes": 0
            }
        }
    ],
    "suggested_items": []
}
}

Answer 1

echo $resp;
header("Content-Type: application/json", true);

should be:

header("Content-Type: application/json", true);
echo $resp;

You need to send HTTP headers before you output any content.

Answer 2

Set the header before any output

header("Content-Type: application/json", true);
echo $resp;

Answer 3

It'd help if you provided the JSON response.

When I'm having these types of issues, I typically take a step back (in the code) and console.log() earlier. For example, console.log(data) within the function(data) {} .

I think -- from looking at the output -- that your problem is that list isn't actually a list. data.list is, in fact, an object. Therefore .each() will iterate over the individual items (like list_id, title, etc). None of these have a .action property.

I can't see any action property, so I can't make a solution suggestion. It's possible that it's within the list object -- but you're still treating it like an array (as if it's list: [{}, {}] rather than list: {} ). In this case, you either need to fix the returned JSON or get rid of the $.each() , and just console.log(data.list.action) .

Answer 4

Musa was able to solve this for me, so in case someone Googles, the problem was that I was trying to use $.each when I didn't need to. Here is the correct code in case anyone is interested:

$.getJSON("trendFetch",function(data){
                var tblRow =
                    "<tr>"
                    +"<td>"+data.list.list_id+"</td>"
                    +"<td>"+data.list.title+"</td>"
                    +"<td>"+data.list.description+"</td>"
                    +"</tr>"
                $(tblRow).appendTo("#userdata tbody");

        }
);