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

我可以获得以下格式的json

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

我如何使用数据来呈现如下图所示的内容，其中第一行是用户名，第二行是book

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

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

测试123

var serviceURL=”http://mydomain.com/";
var学生；
$（“#测试”）。单击（函数（）
{   
getStudentList（）；
});
函数getStudentList（）{
$.getJSON（serviceURL+'getStudents.php'，函数（数据）{
$（'#studentList li'）。删除（）；
学生=data.user\u name；
$。每个（学生，函数（索引，学生）{
$（“#学生列表”）。追加（“
”+
''+student.user_name+''+student.password+''+
“”+student.user_name+”
”+
“
”）；
});
$（“#学生列表”）.listview（“刷新”）；
});
}

---

我可以问一下上面的代码是否正确吗？

您将响应命名为

数据

。由于您的响应位于数组

[]

中，因此必须首先循环

数据。。再次获取其对象，该对象是数据

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

并在循环中获取相应的名称和密码对象…您可以通过
操作符获取该对象。。所以在循环内部，
student.data.user\u 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');
});

$.getJSON（serviceURL+'getStudents.php'，函数（数据）{
$（'#studentList li'）。删除（）；
//学生=data.user\u name；
$。每个（数据、函数（索引、学生）{
$（“#学生列表”）。追加（“
”+
''+student.data.user\u name+''+//这里获取用户名
“”+student.data.book+”
“+//这里有一本书
“
”）；
});
$（“#学生列表”）.listview（“刷新”）；
});
基于您的输入，我已经这样做了，您只需将其包含到代码中即可。我不知道你所说的“第二行是书”是什么意思，因为你的json输入中没有书，你正试图访问“student.data.password”，而输入中也没有。
JSFIDLE的简单版本

var json=[{“data”：{“id”：“1”，“用户名”：“StudentA”，“book”：“123”，“role”：“Student”}，
{“数据”：{“id”：“3”，“用户名”：“StudentB”，“书”：“456”，“角色”：“Student”}]；
var=json；
$。每个（学生，函数（索引，学生）{
$（“#学生列表”）。追加（“
”+
''+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('<li>' +
                '<h4>' + student.data.user_name + '</h4>' +
                '<p>' + student.data.role + '</p>' +
                '</li>');
        });
        $('#studentList').listview('refresh');
    });
}

函数getStudentList（）{
$.getJSON（serviceURL+'getStudents.php'，函数（数据）{
$（'#studentList li'）。删除（）；
$。每个（数据、函数（索引、学生）{
$（“#学生列表”）。追加（“
”+
''+student.data.user_name+''的+
“”+student.data.role+”
”+
“
”）；
});
$（“#学生列表”）.listview（“刷新”）；
});
}

您得到了什么样的输出？如果您得到的是问题中提到的上述json响应，那么这应该是可行的。。请确保您首先得到响应…并让我知道..我在提供的链接中没有看到$.getJSON部分。。你错过了吗？如果我将html、js文件发布到服务器端，我可以获取内容，但是如果我在应用程序中检查它，我想可能存在一些交叉浏览器问题…因为你在getJSON中提供的路径看起来像另一个服务器/域是。。我正要提到jsoncallback。。。看到你之前的评论（我猜你删除了：）。。不管怎样，很高兴你自己成功了。。快乐编码：）

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