Как добавить вывод json в таблицу html с помощью редактируемого tr, используя цикл for

Question

Я работаю с платформой codeigniter, так что согласно моему требованию я получаю пользовательские данные из базы данных и кодирую json_encode, так как в php мы используем цикл foreach для отображения данных в таблице, но из-за json эти данные следует добавить в таблицу с помощью цикла for в сценарии jquery, и здесь я застрял, так как это сделать, то есть пользовательские данные, добавленные в таблицу один за другим. с возможностью редактирования <tr>

Код контроллера

public function get_users() {

   $result = $this->db->get('users')->result();
   header('Content-Type: application/json');
   echo json_encode($result);

}

JQuery AJAX для получения вывода в JSON

 $.ajax({
        url: "<?= base_url('controller/get_users') ?>",
        type: 'POST',
        data: {},
        success: function (response) {
             console.log(response);
            var arr_output=JSON.stringify(response);

          // For loop code to append each  user data in table with  editable tr

        },
        error: function (xhr) {
            alert(xhr.status);
        }
    });

HTML таблица

<table class="append_data">
  <tr>
    <th>Name</th>
    <th>mobile not</th>
    <th>city</th>
    <th>edit</th>z
  </tr>

</table>

Answer 1

var output = myJSON;  //from succss:function(myJSON)
  var html = '';
  $.each(output,function(key,value){
      html +='<tr>';
      html +='<td>'+ value.name + '</td>';
      html +='<td>'+ value.mobile + '</td>';
      html +='<td>'+ value.id + '</td>';
      html +='</tr>';
  });
$('.append_data tbody').append(html);

Answer 2

Вы имеете в виду что-то подобное?

Конечно, я не включил ваш исходный код в свой ответ, но его достаточно просто скопировать и вставить. В моем примере я использую функциональный стиль, то есть curry , шаблонные литералы и не говоря уже о функции map .

Полагаю, все, что вам действительно нужно сделать в этом сценарии, - это передать таблицу и данные из функции AJAX success в предоставленную мной функцию рендеринга, я просто предполагаю, что данные, возвращенные из Сервер представляет собой массив объектов.

// The HTML table.
const tbl = document.querySelector('.append_data');

// Some example data.
const dummyData = [
  {name: 'demo', mobile: '01748329', city: 'NY', edit: 'Something'},
  {name: 'test', mobile: '12345789', city: 'WA', edit: 'Something Else'}
];

// A function to produce a HTML table row as a string.
const template = d => `<tr>
    <td>${d.name}</td>
    <td>${d.mobile}</td>
    <td>${d.city}</td>
    <td>${d.edit}</td>
  </tr>`;

// A function that takes a table, returns a function to accept an arrya of objects.
// It will then add the relevant template(s) to the provided table. 
const render = tbl => d => tbl.innerHTML += d.map(i => template(i)).join('');

// Fire the render function. 
render(tbl)(dummyData);

<table class="append_data">
  <tr>
    <th>Name</th>
    <th>mobile</th>
    <th>city</th>
    <th>edit</th>
  </tr>
</table>

Редактировать

Я также использовал функции стрелок в моем первом примере, вот более удобная для начинающих реализация.

// The HTML table.
var tbl = document.querySelector('.append_data');

// Some example data.
var dummyData = [
  { name: 'demo', mobile: '01748329', city: 'NY', edit: 'Something' }, 
  { name: 'test', mobile: '12345789', city: 'WA', edit: 'Something Else' }
];

// A function to produce a HTML table row as a string.
var template = function template(d) {
  return '<tr>' 
  + '<td>' 
  + d.name 
  + '</td>' 
  + '<td>' 
  + d.mobile 
  + '</td>' 
  + '<td>' 
  + d.city 
  + '</td>' 
  + '<td>' 
  + d.edit 
  + '</td>' 
  + '</tr>';
};

// A function that takes a table, returns a function to accept an arrya of objects.
// It will then add the relevant template(s) to the provided table. 
var render = function render(tbl) {
  return function (d) {
    return tbl.innerHTML += d.map(function (i) {
      return template(i);
    }).join('');
  };
};

// Fire the render function. 
render(tbl)(dummyData);

<table class="append_data">
  <tr>
    <th>Name</th>
    <th>mobile</th>
    <th>city</th>
    <th>edit</th>
  </tr>
</table>

Редактировать 2

Если я не ошибаюсь, вам нужно удалить JSON.stringify, чтобы он корректно работал с предоставленным мною кодом. В коде, который я предоставил, вы можете видеть, что мой код ожидает object, и если вы используете JSON.stringify, то , по сути , преобразует объект в строку. В этом случае этот код не будет работать ... Может быть, вам следует немного больше прочесть о том, как использовать такие методы, как JSON.stringify & JSON.parse.