Извлечение данных json и отображение

Question

Я столкнулся с некоторой проблемой при динамическом отображении данных json. У меня более 80 строк данных. Когда я пытаюсь отобразить имя динамически, все имена становятся одинаковыми. то есть, оно принимает последние данные в списке

$(".mem-wrap").each(function(){ 
 
\t var url ="welcome/fetchdata"; 
 
\t var mm = $(this).parent().attr('data-id'); 
 

 
\t $.ajax({ 
 
\t url: url, 
 
\t data: "id="+mm, 
 
    context: document.body 
 
\t }).done(function(data) { 
 
\t \t var data3 = JSON.parse(data); 
 
\t \t console.log(mm+" "+" "+data3.results[0].name); 
 
\t \t console.log($(this).find('.name').html()); 
 
\t \t $(this).find('.name').text(data3.results[0].name); 
 
\t  
 

 
\t }); 
 
});

<div class="team-wrap-2" data-id="2" > 
 
    <img src="images.." alt="" /> 
 
       <div class="mem-wrap"> 
 
        <div class="mem-name-wrap"> 
 
        <h2 class="name">abcd</h2> 
 
        <h3 class="des">sfgh</h3> 
 
        </div> 
 
        <div class="clear"></div> 
 
       </div> 
 
       <div class="clear"></div> 
 
       </div> 
 
       <div class="team-wrap-2" data-id="3" > 
 
       <img src="images/team/...." alt="" /> 
 
       <div class="mem-wrap"> 
 
        <div class="mem-name-wrap"> 
 
        <h2 class="name"></h2> 
 
        <h3 class="des"></h3> 
 
        <div class="clear"></div> 
 
        </div> 
 
        <div class="clear"></div> 
 
       </div> 
 
       <div class="clear"></div> 
 
       </div> 
 
       <div class="team-wrap-2" data-id="4" > <img src="images/team/thumb/mem.jpg" alt="" /> 
 
       <div class="mem-wrap"> 
 
        <div class="mem-name-wrap"> 
 
        <h2 class="name">fdg</h2> 
 
        <h3 class="des">sfdsf</h3> 
 
        <div class="clear"></div> 
 
        </div> 
 
        <div class="clear"></div> 
 
       </div> 
 
       <div class="clear"></div> 
 
       </div>

Answer 1

Вам нужно добавить цикл. например:

$(".mem-wrap").each(function(){ 
var url ="welcome/fetchdata"; 
var mm = $(this).parent().attr('data-id'); 

$.ajax({ 
url: url, 
data: "id="+mm, 
context: document.body 
}).done(function(data) { 
    for(var i=0;i<data.length;i++){ 

    } 
}); 
}); 

Answer 2

Вы не итерируете индекс набора результатов.

Попробуйте

 
    $(".mem-wrap").each(function(){ 
 
     \t var url ="welcome/fetchdata"; 
 
     \t var mm = $(this).parent().attr('data-id'); 
 
      
 
     \t $.ajax({ 
 
     \t url: url, 
 
     \t data: "id="+mm, 
 
      context: document.body 
 
     \t }).done(function(data) { 
 
       for(var i=0 ;i<data.length;i++){ 
 
     \t \t var data3 = JSON.parse(data); 
 
     \t \t console.log(mm+" "+" "+data3.results[i].name); 
 
     \t \t console.log($(this).find('.name').html()); 
 
     \t \t $(this).find('.name').text(data3.results[i].name); 
 
      } 
 
     \t  
 

 
     \t }); 
 
     });

<div class="team-wrap-2" data-id="2" > 
 
      <img src="images.." alt="" /> 
 
         <div class="mem-wrap"> 
 
          <div class="mem-name-wrap"> 
 
          <h2 class="name">abcd</h2> 
 
          <h3 class="des">sfgh</h3> 
 
          </div> 
 
          <div class="clear"></div> 
 
         </div> 
 
         <div class="clear"></div> 
 
         </div> 
 
         <div class="team-wrap-2" data-id="3" > 
 
         <img src="images/team/...." alt="" /> 
 
         <div class="mem-wrap"> 
 
          <div class="mem-name-wrap"> 
 
          <h2 class="name"></h2> 
 
          <h3 class="des"></h3> 
 
          <div class="clear"></div> 
 
          </div> 
 
          <div class="clear"></div> 
 
         </div> 
 
         <div class="clear"></div> 
 
         </div> 
 
         <div class="team-wrap-2" data-id="4" > <img src="images/team/thumb/mem.jpg" alt="" /> 
 
         <div class="mem-wrap"> 
 
          <div class="mem-name-wrap"> 
 
          <h2 class="name">fdg</h2> 
 
          <h3 class="des">sfdsf</h3> 
 
          <div class="clear"></div> 
 
          </div> 
 
          <div class="clear"></div> 
 
         </div> 
 
         <div class="clear"></div> 
 
         </div>