Заполните таблицу, используя AJAX и PHP

Question

Я хочу заполнить HTML-таблицу данными из базы данных, используя ajax.

Используя PHP, я создаю этот массив:

[
    {
        "custom_id":"453",
        "name":"test",
        "barcode":"3234234",
        "grupa":"Служебна група",
        "quantity_type":"бр.",
        "quantity_number":"1",
        "obekt":"Служебен обект",
        "price_delivery":"0.00",
        "price_sale":"0.00"
    },
    {
        "custom_id":"2",
        "name":"asdasd",
        "barcode":"","grupa":
        "Служебна група",
        "quantity_type":"бр.",
        "quantity_number":"1",
        "obekt":"Служебен обект",
        "price_delivery":"0.00",
        "price_sale":"0.00"
    },
    {
        "custom_id":"4",
        "name":"Тутракан",
        "barcode":"",
        "grupa":"Служебна група",
        "quantity_type":"бр.",
        "quantity_number":"1",
        "obekt":"Служебен обект",
        "price_delivery":"0.00",
        "price_sale":"0.00"
    }
]

А это JS:

function loadTable() {

$.ajax({
    type: "POST",
    dataType: "json",
    url: "generate_json/get_items_2.php", //Relative or absolute path to response.php file
    data: {action: "load"},
    success: function (response) {
        //i don't know what exactly to put here
    }
});
  return false;
}

Возможно, мне нужен цикл, но как получить доступ к элементам массива?

Answer 1

Внутри обратного вызова success вы должны пройти через возвращенный массив как response, создавая строки и добавляя их в таблицу как:

var response = [{
  "custom_id": "453",
  "name": "test",
  "barcode": "3234234",
  "grupa": "Служебна група",
  "quantity_type": "бр.",
  "quantity_number": "1",
  "obekt": "Служебен обект",
  "price_delivery": "0.00",
  "price_sale": "0.00"
}, {
  "custom_id": "2",
  "name": "asdasd",
  "barcode": "",
  "grupa": "Служебна група",
  "quantity_type": "бр.",
  "quantity_number": "1",
  "obekt": "Служебен обект",
  "price_delivery": "0.00",
  "price_sale": "0.00"
}, {
  "custom_id": "4",
  "name": "Тутракан",
  "barcode": "",
  "grupa": "Служебна група",
  "quantity_type": "бр.",
  "quantity_number": "1",
  "obekt": "Служебен обект",
  "price_delivery": "0.00",
  "price_sale": "0.00"
}];

$.each(response, function(index, obj) {
  var row = $('<tr>');
  row.append('<td>' + obj.custom_id + '</td>');
  row.append('<td>' + obj.name + '</td>');
  row.append('<td>' + obj.barcode + '</td>');
  row.append('<td>' + obj.grupa + '</td>');

  $('table').append(row)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border=1>
  <tr>
    <td>Custom id</td>
    <td>Name</td>
    <td>Barcode</td>
    <td>Grupa</td>
  </tr>
</table>