如何显示在PhoneGap的锂格式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

..since你的回应，您的命名响应，data是数组[]你必须循环data第一..得到它的对象，再次是数据..

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

并获得correponding名和密码在循环对象......你可以通过.运营商..所以内环路，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'); 
}); 

Answer 2

我已经根据您的输入完成了它，您只需将其包含到您的代码中即可。我不知道'第二行是书'是什么意思，因为你的json输入中没有包含任何书，你正在尝试访问'student.data.password'，它也不存在于输入中。 的jsfiddle http://jsfiddle.net/2KMd9/

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


    var students = json; 
    $.each(students, function(index, student) { 
     $('#studentList').append('<li>' + 
       '<h4>' + student.data.user_name + '</h4>' + 
       '<p>' + student.data.role + '</p>' + 
       '</li>'); 
    }); 

因此，对于你的需求的简单版本：

function getStudentList() { 
    $.getJSON(serviceURL + 'getStudents.php', function(data) { 
     $('#studentList li').remove(); 

     $.each(data, function(index, student) { 
       $('#studentList').append('<li>' + 
       '<h4>' + student.data.user_name + '</h4>' + 
       '<p>' + student.data.role + '</p>' + 
       '</li>'); 
     }); 
     $('#studentList').listview('refresh'); 
    }); 
}