Generate LI with Json Objects get from PHP

Question

I have a little problem. I've got json datas from a $.get() request with jQuery

Here is the output :

[
    {"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"}
]

I try to generate an UL with an LI for each objetcs...

I write this little code :

//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');                
        }
    );

When i use console.log() each objects are logged by firebug : no error... it works.

This is the items.push() and the appendTo() which generate nothing... no error in the console... no append in my #results div...

I'm sure I do something wrong. Can anyone help me ?

Update

With the help of Fabrício Matté (answer after), the problem was the iframe.

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

That works =)

Sey you soon Stackoverflow Community

Answer 1

edit: As per João's comment, your original code is working perfectly fine. Make sure that:

1. #result is in the DOM when you try to append the data;
2. jQuery.parseJSON(data) returns an array of objects;
3. jQuery is properly included and there are no syntax errors before executing that line;

4. I rewrote the code slightly to make it easier to read as well:

    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'); 

Fiddle

---

EDIT

As per OP's comment, you can't use a selector to select elements inside of an iframe without referencing its document first. Here's how I'd do it with contents() and 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

Note that this does not work if the iframe document is from a different host, port or protocol.
Same Origin Policy reference

Answer 2

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