使用Json Objects生成LI来自PHP

时间:2012-09-13 09:29:39

标签: jquery json parsing get

我有点问题。我从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社区

2 个答案:

答案 0 :(得分: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');
    
  5. Fiddle


    修改

    根据OP的评论,您不能使用选择器来选择iframe内的元素而不首先引用其document。以下是我使用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));
    

    Fiddle

    注意如果iframe文档来自其他主机,端口或协议,则无效。
    Same Origin Policy reference

答案 1 :(得分:0)

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