Question

我想使用json调用从php页面检索数据，并使用jquery mobile在listview中显示它。我能够检索数据并能够在列表中显示但我面临的问题是：我的数据在php文件中像这样lokks：（[{“id”：“1”，“name”：“Big Ben”，“latitude”：“51.500600000000”，“经度”：“ - 0.124610000000”}，{“id”：“4”，“name” ：“Hadrian's Wall”，“纬度”：“55.024453000000”，“经度”：“2.142310000000”}，{“id”：“2”，“name”：“巨石阵”，“纬度”：“51.178850000000”，“经度“：” - 1.826446000000“}，{”id“：”3“，”name“：”多佛白崖“，”纬度“：”51.132020000000“，”经度“：”1.334070000000“}]）;

当我在列表中显示它时，它只显示在一行列表中。如何根据“id”在单独的行中显示数据？

Answer 1

var i;

for(i = 0; i < data.length; i+=1) {
    // do whatever here, the id is in data[i].id
    console.log(data[i].id);
}

由于您提到您使用的是jQuery mobile，或许您要将<li>元素附加到列表视图，在这种情况下，您将.append方法用于<ul data-role=listview>。

编辑：根据您的评论，将每个功能更改为：

$.each(data, function(i, item) {
     $('ul').append('<li><h1>' + item.name + '</h1><p>' + item.latitude + '<br>' + item.longitude + '</p></li>');
});

从HTML代码中删除<li><a id="output"> </a></li>。

但是，如果页面上有多个<ul>元素，则无法使用，因此建议在正确的id元素上设置<ul>。

Answer 2

$(document).ready(function(){
$(document).bind('deviceready', function(){
    //Phonegap ready
    onDeviceReady();
});

var output = $('#output');

$.ajax({
    url: 'http://samcroft.co.uk/demos/updated-load-data-into-phonegap/landmarks.php',
    dataType: 'jsonp',
    jsonp: 'jsoncallback',
    timeout: 5000,
    success: function(data, status){
        $.each(data, function(i,item){ 
            var landmark = '<h1>'+item.name+'</h1>'
            + '<p>'+item.latitude+'<br>'
            + item.longitude+'</p>';

            output.append(landmark);
        });
    },
    error: function(){
       output.text('There was an error loading the data.');
    }
});

}）;

如何在列表视图中显示json数据？

2 个答案: