Блог

Раньше я загружал данные из файла json в этом формате в свою таблицу DataTables:

 {
    "data": [
        ["n/a","668","01.11.2021 14:16:20", ... ],
        ["n/a","670","05.11.2021 23:23:54", ...]
    ]
}

...
        "ajax": "first.json",
        columns: [ 
            { data: 0 },
            { data: 1 }
...
 

И все было в порядке

Но теперь формат моего json был изменен:

 {
    "data": {
        "deals": [["n/a", "718", "30/11/2021 21:46:14"], ["", "718", "30/11/2021 21:46:14"], ... ], 
        "stops": [["07/10/2021 21:48:28", "BTCUSDT"], ["07/10/2021 21:48:28", "BTCUSDT"], ... ] 
    }
}
 

И я пытаюсь получить такие данные и получаю «Нет данных, доступных в таблице»:

 ...
        "ajax": "first.json",
        columns: [ 
            { data: 'deals.0' },
            { data: 'deals.1' }
...
 

Как я могу получить данные из нового формата json в свою таблицу?

Вот ваша новая структура JSON, предоставленная URL:

 {
    "data": {
        "deals": [
            ["n/a", "718", "30/11/2021 21:46:14"],
            ["", "718", "30/11/2021 21:46:14"]
        ],
        "stops": [
            ["07/10/2021 21:48:28", "BTCUSDT"],
            ["07/10/2021 21:48:28", "BTCUSDT"]
        ]
    }
}
 

В этой структуре расположение данных сделок является data.deals . Это местоположение указывает на массив массивов, в котором нуждается DataTables (или массив объектов).

(Это означает, что таблица будет иметь доступ только к deals данным, поскольку stops данные полностью находятся в отдельном месте. Но я предполагаю, что вы хотите deals , чтобы данные соответствовали вашему исходному примеру.)

Поэтому вам необходимо использовать dataSrc опцию DataTables, чтобы указать DataTables, где искать в вашем новом JSON:

 <table id="example" class="display" style="width:100%"></table>
 

и:

 $(document).ready(function() {

  $('#example').DataTable( {
    ajax: {
      method: "GET",
      url: "first.json", // or whatever URL you want to use
      dataSrc: "data.deals"
    },
    "columns": [
      { "title": "Col 1" },
      { "title": "Col 2" },
      { "title": "Col 3" }
    ]
            
  } );

} );
 

Поскольку каждая строка данных представляет собой массив, вам не нужно указывать конкретные индексы массива в вашем columns — DataTables будет выполнять итерацию по каждому массиву строк для вас.

Результат: