Parse Nested JSON With JQuery

Question

I'm new to JSON and really struggling with this. I've read countless other posts and web pages but can't seem to figure it out.

I'm using PHP to output JSON (from data from the database) with this code:

    header('Content-type: application/json');
    echo json_encode($data);

Here is the JSON:

{
    "x0": {
        "id": "1",
        "name": "Rob",
        "online": "1",
        "gender": "m",
        "age": "29",
        "height": "5'8''",
        "build": "Average",
        "ethnicity": "White",
        "description": "Art geek person",
        "looking_for": "Anything",
        "image": "4fs5d43f5s4d3f544sdf.jpg",
        "last_active": "29-06-11-1810",
        "town": "Manchester",
        "country": "UK",
        "distance": 0.050973560712308
    },
    "x1": {
        "id": "2",
        "name": "Dave",
        "online": "1",
        "gender": "m",
        "age": "29",
        "height": "5'8''",
        "build": "Average",
        "ethnicity": "White",
        "description": "Art geek person",
        "looking_for": "Anything",
        "image": "4fs5d43f5s4d3f544sdf.jpg",
        "last_active": "29-06-11-1810",
        "town": "Manchester",
        "country": "UK",
        "distance": 0.050973560712308
    }
}

I think the problem I'm having is that the JSON is nested(might be wrong there)?.

This is the JQuery:

function fetchProfiles() {
    var url='http://url.com/here';
    var i = 0;
    var handle = 'x'.i;

    $.getJSON(url,function(json){
        $.each(json.results,function(i,profile){
           $("#profiles").append('<p><img src="'+profile.handle.image+'" widt="48" height="48" />'+profile.handle.name+'</p>');
           i++;
        });
    });
}

Any ideas or suggestions appreciated!

Thanks!

Does your JSON look exactly like this? I'd expect an array… And does it really have a root key called "results"? — polarblau
– polarblau, Commented Jul 1, 2011 at 12:20
Yes that's the JSON output from PHP. Good point about .results - copy and paste error there. — logic-unit
– logic-unit, Commented Jul 1, 2011 at 12:23

Nicola Peluchetti · Accepted Answer · 2011-07-01 12:20:55Z

3

i think that the problem is that you call $.each on json.results (if the json is exactly what you showed us).

you sholud do:

    $.each(json,function(i,profile){
       $("#profiles").append('<p><img src="'+profile.image+'" widt="48" height="48" />'+profile.name+'</p>');
    });

look at the fiddle here: http://jsfiddle.net/ENcVd/1/ (it alerst the image property of you json object)

answered Jul 1, 2011 at 12:20

Nicola Peluchetti

77k32 gold badges151 silver badges197 bronze badges

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

6 Comments

logic-unit Over a year ago

Thanks for your answer - the example works perfectly. I think my problem might be with the URL I'm pulling the JSON from. It displays in the browser, but using the jsfiddle code it just alerts undefined?

logic-unit Over a year ago

Also in Firebug console the GET url is red, but has a 200 OK server response?

Nicola Peluchetti Over a year ago

Maybe the problem is that the server you are making the request to is not on the same domain of the page making the request. Is it so? In any case, if you have a complete fiddle, i'll try to help!

logic-unit Over a year ago

Ah yes that's right, I'm building an app in PhoneGap (js script running locally) that is getting the url from another server. Can this not be done? Thanks again.

Nicola Peluchetti Over a year ago

I think you must use $.ajax() and set crossDomain option to true. Look here api.jquery.com/jQuery.ajax

|

Collectives™ on Stack Overflow

Parse Nested JSON With JQuery

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related