Как повторить столбцы на основе данных JSON для отображения данных

Question

Привет. У меня есть данные JSON, полученные из ответа AJAX, и он имеет вложенный массив.

[{
    "Solution": "MobileBroadband",
    "Operator": "MTN",
    "VNF": [{
        "vendor": "vendor1",
        "name": "product1",
        "release": "1.0"
    },
    {
        "vendor": "vendor3",
        "name": "prodc3",
        "release": "3.0"
    },
    {
        "vendor": "saef",
        "name": "vEPG",
        "release": "2.4"
    }]
},
{
    "Solution": "CLoud",
    "Operator": "Airtel",
    "VNF": [{
        "vendor": "vendor1",
        "name": "product1",
        "release": "1.0"
    },
    {
        "vendor": "vendor3",
        "name": "prodc3",
        "release": "3.0"
    }]
}]

Как динамически добавить вышеуказанные данные в столбцы таблицы данных.

Яожидая что-то вроде этого:

Answer 1

Во-первых, вам необходимо установить параметр DataTables ajax соответственно:

$('#mytable').DataTable({
    ajax: {
        ...
        url: '/getdata' //URL to API that returns your JSON data
    }

});

Далее вам нужно «сгладить» исходную структуру JSON, чтобы она содержала массив объектов, каждое свойство которых соответствует столбцу таблицы. Для этого вам может понадобиться опция ajax.dataSrc (для постобработки полученного JSON):

$('#mytable').DataTable({
    ajax: {
        url: '/getdata',
        dataSrc: rawJson => rawJson.map(entry => {
            entry.VNF.forEach((vnfEntry, vnfEntryIndex) => Object.entries(vnfEntry).forEach(vnfEntryProp => entry[vnfEntryProp[0] + vnfEntryIndex] = vnfEntryProp[1]));
            delete entry.VNF;
            return entry;
        })
    }
});

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

$.fn.dataTable.ext.errMode = 'none';

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

Для полноценной демоверсии вы можете проверить эту ссылку .

Answer 2

Попробуйте задать свой ответ следующим образом:

var data = [
    [ "Row 1 - Field 1", "Row 1 - Field 2", "Row 1 - Field 3" ],
    [ "Row 2 - Field 1", "Row 2 - Field 2", "Row 2 - Field 3" ],
];

var columns = [
    { "title":"One" },
    { "title":"Two" },
    { "title":"Three" }
];

$(document).ready(function() {
  $('#example').DataTable( {
    dom: "Bfrtip",
    data: data,
    columns: columns
  });
});

Вы можете попробовать это в js fiddle