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