Отображение данных, возвращенных с помощью Ajax, в табличном формате

Question

Я использую Ajax + Jquery для получения данных из API PHP.В этом PHP API на последнем шаге я делаю-

$ data_enc = json_encode ($ data);echo $ data_enc;

И я получаю это возвращенное значение -

{"headers":["Age","Count","Consent","Intent"],"data":{"17":{"Age":"17","Count":2,"Consent":"2","Intent":0},"18":{"Age":"108","Count":3,"Consent":"3","Intent":0},"115":{"Age":"115","Count":1,"Consent":"1","Intent":0},"117":{"Age":"117","Count":2,"Consent":"2","Intent":0},"118":{"Age":"118","Count":1,"Consent":"1","Intent":0},"Totals":{"Age":"Total","Count":67,"Consent":67,"Intent":0}}}

На стороне Jquery

success: function(data){
    alert(typeof(data)); //returns string
},

Когда я делаю typeof (данные) в jQueryУспех Ajax, он говорит, что это строка.Мне нужно отобразить эти данные в таблице со столбцами как Возраст, Количество, Согласие, Намерение.

Я попытался зациклить объект на стороне jQuery, но не смог получить желаемый результат.

Answer 1

Используйте dataType: 'json' в вашем запросе ajax.

Для построения таблицы:

HTML:

<table id="myTable">
   <thead></thead>
   <tbody></tbody>
</table>

JS:

$.ajax({
   url: '...',
   dataType: 'json',
   success: function (result) {
       $('#myTable tr').empty();
       var header = $('#myTable thead');
       var body = $('#myTable tbody');
       var hTr;
       $('#myTable thead').append(hTr = $('<tr>'));
       // Headers
       for (var h = 0; h < result.headers.length; h++) {
          hTr.append($('<th>', { text: result.headers[h] }))
       }
       // Body
       for (var d in result.data) {
          var data = result.data[d];
          $('#myTable tbody').append($('<tr>')
              .append($('<td>', { text: data.Age }))
              .append($('<td>', { text: data.Count }))
              .append($('<td>', { text: data.Consent }))
              .append($('<td>', { text: data.Intent }))
          )
       }
   }
})