Appends only last value when looping through Json array Jquery

Question

I am looping through a json array and append some of its value to a a div. Looping through works fine. But when i have multiple value in the json. It appends only the last value.

Here is my json

{"msg":[{"id":22,"created_at":"2017-01-16 08:57:43","updated_at":"2017-01-16 08:57:43","profile_name":"VFX DESIGNER","experience":"0-2","skill":"s:10:\"MYSQL,JAVA\";","user_id":"2","comments":"sadsads","aptitude":"yes"},
{"id":23,"created_at":"2017-01-16 08:57:43","updated_at":"2017-01-16 08:57:43","profile_name":"MAYA ","experience":"0-2","skill":"s:10:\"MYSQL,JAVA\";","user_id":"2","comments":"sadsads","aptitude":"yes"}]}

When i loop through to get the profile name , it shows only MAYA in the 2nd value. and VFX DESIGNER is not appended.

$.each(data,function(key,value){
        $.each(value,function(index,titleObj){
            $("#profiles_name ul").empty();
            $("#profiles_name ul").append("<a  href = javascript:getCandidates(this) data-value = "+titleObj.user_id+"/"+titleObj.id+"><li>"+titleObj.profile_name+"</li></a><li class = divider></li>");
        });
    });

Take the .empty() outside of the loop

GôTô
– GôTô

2017-01-17 07:59:21 +00:00
Commented Jan 17, 2017 at 7:59 — GôTô
– GôTô, Commented Jan 17, 2017 at 7:59

Suren Srapyan · Accepted Answer · 2017-01-17 08:02:04Z

3

Because you are using ("#profiles_name ul").empty(); In every iteraion it removes everything in ("#profiles_name ul") and then appends a new a.

Use the empty() before the first each, it will clean your element and then iterate over the data.

$("#profiles_name ul").empty();

$.each(data,function(key,value){
   $.each(value,function(index,titleObj){
      $("#profiles_name ul").append("<a  href = javascript:getCandidates(this) data-value = "+titleObj.user_id+"/"+titleObj.id+"><li>"+titleObj.profile_name+"</li></a><li class = divider></li>");
   });
});

edited Jan 17, 2017 at 8:02

answered Jan 17, 2017 at 7:58

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

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

Comments

Nitheesh · Accepted Answer · 2017-01-17 08:00:10Z

1

Try

$("#profiles_name ul").empty();
$.each(data,function(key,value){
        $.each(value,function(index,titleObj){

            $("#profiles_name ul").append("<a  href = javascript:getCandidates(this) data-value = "+titleObj.user_id+"/"+titleObj.id+"><li>"+titleObj.profile_name+"</li></a><li class = divider></li>");
        });
    });

Empty profiles_name ul before loop

answered Jan 17, 2017 at 8:00

Nitheesh

20.1k3 gold badges28 silver badges52 bronze badges

Comments

Shubham · Accepted Answer · 2017-01-17 07:59:45Z

0

Create a string and then append it to get the desired output.

var str = "";
$.each(data,function(key,value){
    $.each(value,function(index,titleObj){
        str +="<a  href = javascript:getCandidates(this) data-value = "+titleObj.user_id+"/"+titleObj.id+"><li>"+titleObj.profile_name+"</li></a><li class = divider></li>";
    });
});

$("#profiles_name ul").empty();
$("#profiles_name ul").append(str);

answered Jan 17, 2017 at 7:59

Shubham

1,7933 gold badges18 silver badges37 bronze badges

Comments

GôTô · Accepted Answer · 2017-01-17 08:27:23Z

0

Yes right because in each loop you making UL empty and then append newly created html... so: Just once empty UL once:

$("#profiles_name ul").empty();

Then loop through data and append html to it:

$.each(data,function(key,value){
        $.each(value,function(index,titleObj){

            $("#profiles_name ul").append("<a  href = javascript:getCandidates(this) data-value = "+titleObj.user_id+"/"+titleObj.id+"><li>"+titleObj.profile_name+"</li></a><li class = divider></li>");
        });
    });

Hope this will help to you

edited Jan 17, 2017 at 8:27

GôTô

8,0733 gold badges37 silver badges45 bronze badges

answered Jan 17, 2017 at 8:02

Pankaj Badukale

2,0643 gold badges19 silver badges32 bronze badges

Collectives™ on Stack Overflow

Appends only last value when looping through Json array Jquery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related