Trying to parse JSON file with jQuery

Question

I am trying to parse a JSON file with the exact stucture as in the following.

{
    "students": {
        "student": [
            {
                "id": 1,
                "name": "John Doe",
                "image": "pic1.jpg",
                "homepage": "http: //www.google.com"
            },
            {
                "id": 2,
                "name": "Jane Doe",
                "image": "pic1.jpg",
                "homepage": "http: //www.google.com"
            }
        ]
    }
}

I am using the following jQuery function:

function GetStudents(filename)
{
    $.getJSON(filename, function(data){
        $.each(data.student, function(i,s){
            var id = s.id;;
            var name = s.name;;
            var img = s.image;;
            var homepage = s.homepage;
            $('.networkTable').append('<tr><td><img src="' + img + '" class="picEven pic" width="33" height="35"></td><td><a href="'+ homepage + '" class="networkLink">' + name + '</a></td></tr>');
        });
    });
}

Is there something I am doing wrong?

It should be $.each(data.students.student,.... Does this help? If not then there might be a problem retrieving the data. Are you reading the file from your server or an external one? — Felix Kling
– Felix Kling, Commented Feb 23, 2011 at 22:09
looks like it should be $.each(data.students.student, /*other code here...*/); — Brian Driscoll
– Brian Driscoll, Commented Feb 23, 2011 at 22:10
Oh yeah, I missed that point by Felix. That could be the true reason. — Paul
– Paul, Commented Feb 23, 2011 at 22:11
That solved the issue :D. Thank you very much, i struggled with this the entire day :( — user496607
– user496607, Commented Feb 23, 2011 at 22:16

Felix Kling · Accepted Answer · 2011-02-23 23:28:46Z

6

You are not accessing the correct element. data does not point to students, it points to the outer most element {students:...} (students is an property of it). The array is contained in data.students.student:

$.each(data.students.student, function() {
    //...
});

Further notes:

You don't need to create a local variable if you access a property only once (but of course it might be more readable).
While having consecutive semicolons ;; is not wrong, it is unnecessary and confusing (at least it confuses me ;))

edited Feb 23, 2011 at 23:28

answered Feb 23, 2011 at 22:24

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

Comments

Peter Mortensen · Accepted Answer · 2012-06-28 20:01:18Z

1

s.nametry: <br/>
$("document").ready(function() {
    $.getJSON(fileUrl,

    function(data)
    {
        $("#div-my-table").text("&lt;table&gt;");
        $.each(data, function(i, item) {
            $("#div-my-table").append("&lt;tr&gt;&lt;td&gt;" + item.prop1 +"&lt;/td&gt;&lt;td&gt;" + item.prop2 + "&lt;/td&gt;&lt;/tr&gt;");
        });
        $("#div-my-table").append("&lt;/table>");
    });
});

edited Jun 28, 2012 at 20:01

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Feb 23, 2011 at 22:22

RBZ

2,0741 gold badge18 silver badges34 bronze badges

Collectives™ on Stack Overflow

Trying to parse JSON file with jQuery

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related