使用從PHP獲取的Json對象生成LI

Question

我有一點問題。 我從jQuery的$.get()請求中獲得了json數據

這是輸出：

[
    {"name":"Silver","price":525,"per_month":"20","first_invoice":"20"},
    {"name":"Gold","price":500,"per_month":"50","first_invoice":"0"},
    {"name":"Avion","price":750,"per_month":"10","first_invoice":"10"}
]

我嘗試為每個對象生成帶有LI的UL ...

我寫這個小代碼：

//send get request
    $.get(
        url, 
        { 'dst': dst, 'price':price },
        function(data) {

            var objects = jQuery.parseJSON(data);

            var items = [];

            jQuery.each(objects, function(){
                console.log(this);

                items.push('<li id="' + this.name + '">' + this.price + '</li>');
            }); 

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

當我使用console.log()每個對象都由firebug記錄：沒有錯誤...可以正常工作。

這是items.push()和appendTo() ，它們什么都不生成...在控制台中沒有錯誤...在我的#results div中沒有​​添加...

我確定我做錯了。 誰能幫我 ？

更新

在FabrícioMatté（后接答案）的幫助下，問題出在iframe上。

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

可行=）

很快告訴您Stackoverflow社區

Answer 1

編輯：根據João的評論，您的原始代碼運行正常。 確保：

1. 當您嘗試追加數據時， #result在DOM中；
2. jQuery.parseJSON(data)返回一個對象數組；
3. 正確包含了jQuery，執行該行之前沒有語法錯誤；

4. 我略微重寫了代碼，以使其更易於閱讀：

    var objects = jQuery.parseJSON(data); var items = ''; jQuery.each(objects, function(){ items += '<li id="' + this.name + '">' + this.price + '</li>'; }); jQuery('<ul/>', { 'class': 'my-new-list' }).html(items).appendTo('#results'); 

小提琴

---

編輯

根據OP的評論，如果不先引用iframe的document ，就無法使用選擇器來選擇iframe元素。 這是我將如何使用contents()和find() ：

//replace the $('iframe') with ID/class selector if possible
jQuery('iframe').contents().find('#results').append(jQuery('<ul/>', {
    'class': 'my-new-list'
}).html(items));

小提琴

請注意 ，如果iframe文檔來自其他主機，端口或協議，則此方法無效。
同源政策參考

Answer 2

$('<ul>')
    .addClass('my-new-list')
    .html($.map(objects, function(el) {
        return '<li id="' + el.name + '">' + el.price + '</li>';
    }).join("\n"))
    .appendTo('#results');