I have an issue with jQuery.each(). I retrieve json data from another php file then I want to print specific key from it.

here is the js :

<div class="row" id="fetchmember">
  <script type="text/javascript">

    jQuery('#group').change(function() {
     var id_group = this.value; 
     var memberjson = "fetchmember.php?group="+id_group;

     jQuery.getJSON(memberjson,function(data){
      jQuery.each(data, function(i, item) {

      jQuery("#fetchmember").empty().append("<li>"+item.name+"</li>");

      });                   
   });
});

</script>
</div> 

JSON result from one of the selected option :

[{"id":"1645819602","name":"Michael Great","first_name":"Michael","last_name":"Great"},
{"id":"100000251643877","name":"George Pambudi","first_name":"George","last_name":"Pambudi"}]

I want to print all of name from the json, but it print only last name key of the json. I have tried to use .html() and it also returns only last name key. What's wrong with my code?

Any advice and helps would be greatly appreciated. Thank you very much

I have an issue with jQuery.each(). I retrieve json data from another php file then I want to print specific key from it.

here is the js :

<div class="row" id="fetchmember">
  <script type="text/javascript">

    jQuery('#group').change(function() {
     var id_group = this.value; 
     var memberjson = "fetchmember.php?group="+id_group;

     jQuery.getJSON(memberjson,function(data){
      jQuery.each(data, function(i, item) {

      jQuery("#fetchmember").empty().append("<li>"+item.name+"</li>");

      });                   
   });
});

</script>
</div> 

JSON result from one of the selected option :

[{"id":"1645819602","name":"Michael Great","first_name":"Michael","last_name":"Great"},
{"id":"100000251643877","name":"George Pambudi","first_name":"George","last_name":"Pambudi"}]

I want to print all of name from the json, but it print only last name key of the json. I have tried to use .html() and it also returns only last name key. What's wrong with my code?

Any advice and helps would be greatly appreciated. Thank you very much

• javascript
• jquery
• json
• onchange
• each

Share Improve this question Follow asked Oct 21, 2013 at 14:24 King GoeksKing Goeks 51244 gold badges1111 silver badges3030 bronze badges 1

• 1 What about removing .empty()? – Claudio Holanda Commented Oct 21, 2013 at 14:25

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

You are emptying the div first and then appending :

jQuery("#fetchmember").empty().append("<li>"+item.name+"</li>");

Instead just use :

jQuery("#fetchmember").append("<li>"+item.name+"</li>");

Don't empty it in the loop if you don't want to keep only the last data. Change your callback to

jQuery("#fetchmember").empty();
jQuery.each(data, function(i, item) {
    jQuery("#fetchmember").append("<li>"+item.name+"</li>");
});

Note that you can make one append if you want :

jQuery("#fetchmember").html(data.map(function(item){
    return '<li>'+item.name+'</li>'
}).join(''));