Данные JSON, дублируются при отображении в HTML-таблице

Question

Я успешно извлек данные с помощью этого кода, но проблема, с которой я сталкиваюсь, заключается в том, что данные появляются в нескольких местах, например, "Том", появляется Том, Том, Том ...

      <div class="row">
        <div class="col-12">
          <div class="c-table-responsive@wide" id="responsecontainer">
           <!-- User Json Tabualated Data Display -->
          </div>
        </div>
      </div>

А вот мой код JSON:

{
"userID": "1",
"name": "Precious Tom",
"email": "tomprezine@example.com",
"password": "64a9f0ea7bb98050296b649e85484145",
"gender": null,
"birthday": null,
"location": null,
"avatar": null,
"phone": "8175555649",
"userToken": "n89jf8h3i3n8wywc",
"is_verified": "0",
"dateJoined": "Wed, 02 May 2018 16:20:35 +0100"
}

А вот мой код Ajax:

$(document).ready(function(){
  $(document).ready(function(){
    $.ajax({ 
        type: 'GET', 
        url: '../Module/listcustomers', 
        data: {}, 
        dataType: 'json',
        success: function (data) {
          var tableContent = '<table class="c-table">';
          tableContent += '<thead class="c-table__head">\
                              <tr class="c-table__row">\
                                <th class="c-table__cell c-table__cell--head">Customer</th>\
                                <th class="c-table__cell c-table__cell--head">Email</th>\
                                <th class="c-table__cell c-table__cell--head">Gender</th>\
                                <th class="c-table__cell c-table__cell--head">Phone</th>\
                                <th class="c-table__cell c-table__cell--head">Date Joined</th>\
                                <th class="c-table__cell c-table__cell--head">Is Verified</th>\
                              </tr>\
                            </thead>';
          if(data) {
             tableContent += '<tbody>';
             $.each(data, function( key, value ) {
             tableContent += '<tr class="c-table__row">';
             tableContent += '<td class="c-table__cell"><a href=<?php echo BASEPATH . "Dash/user-profile/"?>'+data.userID+'>'+data.name+'</a></td>';
             tableContent += '<td class="c-table__cell">'+data.email+'</td>';
             tableContent += '<td class="c-table__cell">'+data.gender+'</td>';
             tableContent += '<td class="c-table__cell">'+data.phone+'</td>';
             tableContent += '<td class="c-table__cell">'+data.dateJoined+'</td>';
             tableContent += '<td class="c-table__cell">'+farmshopp.verificationButton(data.is_verified)+'</td>';
           });
          }
          tableContent += "</tbody>";
          tableContent += "</table>";
          $("#responsecontainer").html(tableContent);
        }
    });
  });  
});

Дублированный результат:

Аякс Джсон:

Понятия не имею, что делать дальше, поэтому, пожалуйста, рассчитываю на вашу помощь

Answer 1

Или вы должны привязать к любому свойству в коде AJAX.

success: function (data) { 
$.each(data, function(index, element) {
var htmlstring= '<tr> Email:'+ data[index].email +'</tr>';
$('tbody').append(htmlstring));
});

С помощью этого способа вы можете отобразить данные json в таблице.

Answer 2

HTML

<table class="c-table">
          <thead class="c-table__head">
            <tr class="c-table__row">
              <th class="c-table__cell c-table__cell--head">Customer</th>
              <th class="c-table__cell c-table__cell--head">Email</th>
              <th class="c-table__cell c-table__cell--head">Gender</th>
              <th class="c-table__cell c-table__cell--head">Phone</th>
              <th class="c-table__cell c-table__cell--head">Date Joined</th>
              <th class="c-table__cell c-table__cell--head">Is Verified</th>
              <th class="c-table__cell c-table__cell--head">View</th>
            </tr>
          </thead>

          <tbody>

          </tbody>
        </table>

В '../Module/listcustomers'

 $data = {
 "userID": "1",
 "name": "Precious Tom",
 "email": "tomprezine@gmail.com",
 "password": "64a9f0ea7bb98050296b649e85484145",
 "gender": null,
 "birthday": null,
 "location": null,
 "avatar": null,
 "phone": "8179685649",
 "userToken": "n89jf8h3i3n8wywc",
 "is_verified": "0",
 "dateJoined": "Wed, 02 May 2018 16:20:35 +0100"
 };
 echo '<tr class="c-table__row">
              <td class="c-table__cell">
                <div class="o-media">
                  <div class="o-media__img u-mr-xsmall">
                    <div class="c-avatar c-avatar--small">
                      <img class="c-avatar__img" src="img/avatar1-72.jpg" alt="Jessica Alba">
                    </div>
                  </div>
                  <div class="o-media__body">
                    <h6>'.$data->name.'</h6>
                  </div>
                </div>
              </td>
              <td class="c-table__cell">'.$data->email.'</td>
               ...
              <td class="c-table__cell">
                <a href="#" class="c-btn c-btn--info">
                  View Profile <i class="feather icon-chevron-right"></i>
                </a>
              </td>
            </tr>';

Код Ajax

$(document).ready(function(){
$.ajax({ 
    type: 'GET', 
    url: '../Module/listcustomers', 
    data: {}, 
    dataType: 'json',
    success: function (data) { 
        $('tbody').append(data);
    }
});
});