Question

我使用此代码成功获取了数据，但我遇到的问题是，数据来自多个地方，例如＆＃34; tom＆＃34;，会出现，tom，tom，tom ... < / p>

      <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);
        }
    });
  });  
});

重复结果：

Duplicated Result

Ajax Json：

Ajax Json

我不知道接下来要做什么，所以请指望你的帮助

Answer 1

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>

在＆＃39; ../ Module / listcustomers＆＃39;

中

 $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);
    }
});
});

Answer 2

或者你应该绑定到ajax代码中的任何属性。

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

您可以在桌面上以这种方式显示json的数据。

JSON数据，在html表中显示时自身重复

2 个答案: