Using .html with JQuery not posting all items in an array to HTML

Question

I am using an Ajax call to post some template data to my HTML view with JQuery.

However, when I feed arrays to the following function, it only prints out one of the items in the array in the HTML/view.

The Ajax call:

request = $.ajax({ 
              url: "/fans/follow", 
              type: "post", success:function(data){

                var results = data;
                $.each(results, function( index, value ) { 

                    var template = '<li>'
                   +'<div class="row-fluid">'
                   +'<article class="span3">'
                   +'<a href="/fans/"'+value.fan_tag+'>'
                   +'<img src="https://graph.facebook.com/'+value.fbid+'/picture" alt="" height="40" width="40">'
                   +'</a>'
                   +'</article>'
                   +'<article class="span9 userDescp">'
                   +'<span>'
                   +'<a href="/fans/"'+value.fan_tag+'>'
                   +value.first_name+' '+value.last_name
                   +'</a>'
                   +'</span>'
                   +'</article>'
                   +'</div>'
                   +'</li>';

                   $('div#new_content').find('ul').html(template);

                });

              }, 
              data: {'id': id} ,beforeSend: function(data){
                console.log(data);
              } 
            });

The HTML where it is supposed to print the template:

<div id="new_content">
    <ul></ul>
</div>

Looking in the console, the array is being returned by ajax correctly, but it is not print all of the items, only the first one. I have also checked and the .each loop is going around as many times as there are items in the array, so that's not the issue. Anything I'm missing?

Arun P Johny · Accepted Answer · 2014-11-12 03:52:22Z

2

it is because you are overwriting the content in a loop

request = $.ajax({
    url: "/fans/follow",
    type: "post",
    success: function (data) {

        var results = data,
            //cache a reference and emtpy the ul
            $ul = $('#new_content').find('ul').empty();
        $.each(results, function (index, value) {

            var template = '<li>' + '<div class="row-fluid">' + '<article class="span3">' + '<a href="/fans/"' + value.fan_tag + '>' + '<img src="https://graph.facebook.com/' + value.fbid + '/picture" alt="" height="40" width="40">' + '</a>' + '</article>' + '<article class="span9 userDescp">' + '<span>' + '<a href="/fans/"' + value.fan_tag + '>' + value.first_name + ' ' + value.last_name + '</a>' + '</span>' + '</article>' + '</div>' + '</li>';

            //add the template to the existing contents instead of overwriting it
            $ul.append(template);

        });

    },
    data: {
        'id': id
    },
    beforeSend: function (data) {
        console.log(data);
    }
});

answered Nov 12, 2014 at 3:52

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1072337 Over a year ago

so just replace ".html" with ".append"?

amit_183 Over a year ago

@user1072337...you have to do that..use append

Arun P Johny Over a year ago

@user1072337 also you might want to empty the ul before the loop

Collectives™ on Stack Overflow

Using .html with JQuery not posting all items in an array to HTML

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related