如何顯示在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'); 
    }); 
}