Попытка разобрать файл JSON с помощью jQuery

Question

Я пытаюсь проанализировать файл JSON с точной структурой, как показано ниже.

{
    "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"
            }
        ]
    }
}

Я использую следующую функцию jQuery:

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>');
        });
    });
}

Есть ли что-то, что я делаю не так?

Answer 1

У вас нет доступа к правильному элементу.data не указывает на students, оно указывает на самый внешний элемент {students:...} (students является его свойством).Массив содержится в data.students.student:

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

---

Дополнительные примечания:

• Вам не нужно создавать локальную переменную, если вы обращаетесь ксвойство только один раз (но, конечно, оно может быть более читабельным).

• Хотя наличие последовательных точек с запятой ;; не является неправильным, оно ненужно и сбивает с толку (по крайней мере, меня это смущает;))

Answer 2

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>");
    });
});