Как заполнить dataTable многомерным массивом с динамическим ключом

Question

У меня есть такой массив:

"products": {
  "111111": {
    "date": "01.01.2018",
    "amount": 10,
    "user_id": "user1",
  }
  "222222": {
    "date": "10.10.2018",
    "amount": 15,
    "user_id": "user1,
  }
}

"111111" и "222222" - это идентификаторы, которые генерируются динамически, в зависимости от выбранного пользователя.

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

Есть ли способ заполнить таблицу, если имя столбца является динамическим?

Спасибо!

Answer 1

Если вы можете немного изменить формат вашего json, вы можете легко назначить его как массив для атрибута данных при инициализации таблиц данных.Если это не вариант, вы можете просто проанализировать его в приведенном ниже формате, перебирая пары ключ-значение и добавляя эти данные в массив jsons.

$(document).ready(function() {
  var products = [{
      "product_id": "111111",
      "date": "01.01.2018",
      "amount": 10,
      "user_id": "user1",
    },
    {
      "product_id": "222222",
      "date": "10.10.2018",
      "amount": 15,
      "user_id": "user1",
    }
  ];

  var table = $('#example').DataTable({
    data: products,
    columnDefs: [
      { targets: 0, data: "product_id"},
      { targets: 1, data: "date" },
      { targets: 2, data: "amount" },
      { targets: 3, data: "user_id" }
    ]
  });
});

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

<div class="container">
  <table id="example" class="display nowrap" width="100%">
    <thead>
      <tr>
        <th>product_id</th>
        <th>date</th>
        <th>amount</th>
        <th>user_id</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>