вытягивать данные JSON из внешнего файла с помощью AJAX

Question

В настоящее время я втягивая JSON вручную, чтобы проверить с начальной загрузки таблицы, но должны быть в состоянии вытащить из внешнего файла, подобно тому, как я делал здесь:

$(document).ready(function() { 
     $('#content').dataTable({ 
      "ajax": 'test.log' 
     }); 
    }); 

в настоящее время я вручную установочные данные и перекручивание через это примерно так:

$(document).ready(function() { 
    var json = [{"data":{ 
     "Account": "1234", 
      "Domain": "domain.com", 
     "PlayerClass": "Player"}, 
     "level": "info", 
     "message": "", 
     "timestamp": "2015-06-11T15:11:03.425Z" 
    }, 
       {"data":{ 
     "Account": "4567", 
      "Domain": "domain.com", 
     "PlayerClass": "Player"}, 
     "level": "info", 
     "message": "", 
     "timestamp": "2015-06-11T15:11:03.425Z" 
    }]; 
    var tr; 
    for (var i = 0; i < json.length; i++) { 
     tr = $('<tr/>'); 
     tr.append("<td>" + json[i].data.Account + "</td>"); 
     tr.append("<td>" + json[i].data.Domain + "</td>"); 
     tr.append("<td>" + json[i].timestamp + "</td>"); 
     $('table').append(tr); 
    } 
}); 

Очевидно, что предыдущее использование AJAX прикладывал DataTables, поэтому необходимо либо записать его, чтобы просто применить .each() петлю, или бросить его в DataTable.

Текущая версия в JSFIDDLE

Answer 1

Правильный способ загрузки данных в формате, показанном выше, будет использовать следующие DataTables параметры инициализации:

$('#example').DataTable({ 
    "ajax": { 
     "url": "test.log", 
     "dataSrc": "" 
    }, 
    "columns": [ 
     { "data" : "data.Account" }, 
     { "data" : "data.Domain" }, 
     { "data" : "timestamp" } 
    ] 
}); 

Поскольку вы используете Objects в вашем данных, поэтому вам необходимо сопоставить свойства объекта с столбцами таблицы, используя columns.data. Можно использовать точечную нотацию (например, data.Account) для ссылки на свойства объекта.

Кроме того, опция ajax.dataSrc установлена ​​в пустую строку, чтобы указать, что ваши данные JSON представляют собой массив данных.

См. this JSFiddle для демонстрации. Обратите внимание, что в этом примере используется библиотека mockjax для имитации загрузки файла JSON через Ajax только для демонстрации. Используйте URL-адрес вашего фактического файла в опции url.