如何將json feed顯示給用戶？

我有一個有效的json feed，我通過使用jquery訪問php文件從服務器拉。從查詢php文件返回的JSON提要的一個例子是如何將json feed顯示給用戶？

{"items":[{"acc_number":"11111","acc_name":"TestAccount","demographics":["Some 
Street","SomeState","99999"],"last_thirty":null,"phone":null,"sms":null,"email":null}, {"acc_number":"22222","acc_name":"MyAccount","demographics":"MyStreet","MyState","99999"],"last_thirty":null,"phone":null,"sms":null,"email":null}],"total_items":"80","md5sum":"c7a834d45bdf348abfdcdb95994c7608"}

我使用下面的代碼，我雖然會經歷飼料和打倒所有這一切都沒有空的記錄和字段。但我沒有得到任何東西。

$.ajax({ 
    type= 'GET', 
    url: 'http://MyURL.com', 
    dataType: 'json', 
    username: myusername, 
    password: mypassword, 
    success: function(data) { 
     var items = []; 
     $.each(data, function(key,val) { 
     items.push('<li id="' = key = '">' + val + '</li>'); 
}); 

$('<ul/>', { 
    'class': 'my-new-list', 
    html: items.join('') 
    }).appendTo('body'); 
} 
}); 
}

任何幫助/提示，將始終讚賞。

謝謝！

根據以下答案進行更新。

$(document).ready(function() { 
    testNews(); 
}); 

function testNews() { 
$('body').append('<h1>News</h1>'); 
$('body').append('<h2>Main Display</h2>'); 
$('body').append("<div id='success_news_main' class='waiting'>Waiting for response</div>"); 

$.ajax({ 
type: "GET",  
url: 'http://MyURL.com/news.php', 
dataType: 'json', 
username: myusername, 
password: mypassword, 
success: function(data) { 
    var ul = $('<ul/>').addClass('my-new-list').appendTo('body'); 
    $.each(data.items, function(k,v) { 
    $('<li/>').attr('id', k).html(v).appendTo(ul); 
}); 
} 
}); 
}

來源

2011-09-02 Deon

在形成用於顯示的html標記時，不應該使用字符串連接。相反，使用jQuery的函數創建dom元素，向它們添加屬性值並將它們添加到頁面中。

下面是關於修改代碼的建議：

$.ajax({ 
    type= 'GET', 
    url: 'http://MyURL.com', 
    dataType: 'json', 
    username: myusername, 
    password: mypassword, 
    success: function(data) { 
     var ul = $('<ul/>').addClass('my-new-list').appendTo('body'); 
     $.each(data.items, function(k,v) { 
      $('<li/>').attr('id', k).html(v).appendTo(ul); 
     }); 
    } 
});

這也更容易閱讀和不通過陣列看兩次。

此外，「$ .each」中的「v」變量將成爲json中數組的對象。您需要訪問其各自的屬性並在li中創建必要的html /元素，而不是直接將其設置爲html屬性。

來源

2011-09-02 18:35:52

謝謝你的回答和幫助。上面的解決方案很好地工作。只有項目符號顯示，我會得到正確數量的項目清單。您上面關於訪問各個屬性的評論有一個資源，您可以指示我閱讀或舉例。我假設這是爲什麼值顯示。謝謝！ – Deon

嘗試遍歷data.items並沒有結束data，因爲這是您的收藏：

success: function(data) { 
    var items = []; 
    $.each(data.items, function(key, val) { 
     items.push('<li id="' + key + '">' + val + '</li>'); 
    }); 

    ... 
}

而且你items.push方法似乎與多個=字符打破。你可能意思是+。

另一個說法是$.each聲明中的val變量。這將是一個對象。您可能想從此對象中選擇一個特定的屬性，如：

items.push('<li id="' + key + '">' + val.acc_number + '</li>');

而且鍵將是數組的索引。而且，因爲如果你想有可能需要您的前綴李ID有效的HTML在HTML ID不能以數字開頭：

items.push('<li id="item_' + key + '">' + val.acc_number + '</li>');

來源

2011-09-02 18:26:49

@Deon，您的代碼是否輸入成功回調？ –

感謝您的詳細和快速的答案。我更新了我的代碼，根據您的上述和其他人的建議，但仍然根據我的問題更新代碼，等待響應消息。我也使用phonegap和jquery mobile，所以不確定這是否有所作爲。 – Deon

我把錯誤：alert（'FAILED'），在dataType和我在FireFox和iOS模擬器中都收到失敗的消息之後。所以它看起來像網址可能是問題。 – Deon

遍歷data.items因爲JSON數組中返回的值。該代碼示例還修復了「=」，其中「+」應該是。

$.ajax({ 
    type= 'GET', 
    url: 'http://MyURL.com', 
    dataType: 'json', 
    username: myusername, 
    password: mypassword, 
    success: function(data) { 
     var items = []; 
     $.each(data, function(key,val) { 
      items.push('<li id="' + key + '">' + val + '</li>'); 
     }); 


     $('<ul/>', { 
      'class': 'my-new-list', 
      html: items.join('') 
      }).appendTo('body'); 
    }); 
});

來源

2011-09-02 18:32:55

如何將json feed顯示給用戶？

回答

相關問題