javascript - 如何在phonegap中显示li格式的json内容

Question

我可以得到如下格式的json

[{"data":{"id":"1","user_name":"StudentA","book":"123","role":"Student"}},
{"data":{"id":"3","user_name":"StudentB","book":"456","role":"Student"}}]

如何使用数据呈现如下图，其中第一行是用户名，第二行是书

<button type="button" id="test">Test 123</button>

 <ul id="studentList" data-role="listview" data-filter="true"></ul>

var serviceURL = "http://mydomain.com/";
var students;

    $("#test").click(function()
    {   
        getStudentList();
    });
function getStudentList() {
    $.getJSON(serviceURL + 'getStudents.php', function(data) {
        $('#studentList li').remove();
        students = data.user_name;
        $.each(students, function(index, student) {
            $('#studentList').append('<li>' +
                    '<h4>' + student.user_name + ' ' + student.password + '</h4>' +
                    '<p>' + student.user_name + '</p>' +
                    '</li>');
        });
        $('#studentList').listview('refresh');
    });
}

请问上面的代码是否正确？

Answer 1

您将响应命名为 data..因为您的响应在数组 [] 中，您必须先循环 data.. 得到它又是数据的对象..

[{"data":{"id":"1","user_name":"StudentA","book":"123","role":"Student"}},
//-^^^^---here

并在循环中获取相应的名称和密码对象...您可以通过 . 运算符获取它...因此在循环内，student.data.user_name 给出你的用户名，student.data.book 给你书和其他人的类似...

试试这个...

$.getJSON(serviceURL + 'getStudents.php', function(data) {
    $('#studentList li').remove();
  //students = data.user_name;
    $.each(data, function(index, student) {
        $('#studentList').append('<li>' +
                '<h4>' + student.data.user_name +'</h4>' +  //here get username
                '<p>' + student.data.book + '</p>' +   //here get book
                '</li>');
    });
    $('#studentList').listview('refresh');
});