如何在phonegap中以li格式显示json内容

我可以用以下格式获取json

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

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

 Test 123 
 

 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('
' + '
' + student.user_name + ' ' + student.password + '
' + '
' + student.user_name + '
' + '
'); }); $('#studentList').listview('refresh'); }); } 

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

Answer 1

你将响应命名为data ..因为你的响应是在array []你必须首先循环data ..得到它的对象，这是再次数据..

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

并在循环中获取相应的名称和密码对象…你可以得到它. operator ..所以在内部循环中， 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('
' + '
' + student.data.user_name +'
' + //here get username '
' + student.data.book + '
' + //here get book '
'); }); $('#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('
' + '
' + student.data.user_name + '
' + '
' + student.data.role + '
' + '
'); }); 

所以满足您的需求：

 function getStudentList() { $.getJSON(serviceURL + 'getStudents.php', function(data) { $('#studentList li').remove(); $.each(data, function(index, student) { $('#studentList').append('
' + '
' + student.data.user_name + '
' + '
' + student.data.role + '
' + '
'); }); $('#studentList').listview('refresh'); }); }