Блог

Главная - Вопросы по программированию - Как повторить столбцы на основе данных json для отображения с данными

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

#javascript #jquery #datatables

#javascript #jquery #таблицы данных

Вопрос:

Привет, у меня есть данные 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"
    }]
}]

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

Я ожидаю чего-то подобного:

введите описание изображения здесь

Комментарии:

1. На всякий случай ваш JSON недействителен (в нем отсутствуют запятые и двойные кавычки вокруг ключей свойств).

Ответ №1:

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

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

});

Далее вам нужно «сгладить» исходную структуру JSON, чтобы она содержала массив объектов, где каждое свойство соответствует столбцу таблицы. Для этой цели вам может потребоваться использовать ajax.dataSrc option (для последующей обработки полученного 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 engine.

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

Комментарии:

1. Спасибо.. Это работает, но единственное, что у меня есть столбец no из vnf, и на основе этого, как я могу выполнить итерацию по vnfName, vendor и release вместо того, чтобы указывать {title: ‘vnf-vendor’, data: ‘vendor0’}, {title: ‘vnf-name’, data: ‘name0’}, {title: ‘vnf-release’, data: ‘release0’}, {title: ‘vnf-vendor’, data: ‘vendor1’}, {title: ‘vnf-name’, data: ‘name1’}, {title: ‘vnf-release’, data: ‘release1’},

2. Чем вы можете пойти, например (при условии, что 3 — это максимальное количество поставщиков): ['Solution', 'Operator'].map(item => ({title:item, data: item})).concat([...Array(3)].map((iter, iterIndex) => ['vendor','name','release'].map(item => ({title: 'vnf-' item, data: item iterIndex}))).flat())

3. Хаа .. я не могу его получить .. если вы не возражаете, можете ли вы обновить предоставленную вами демонстрационную ссылку. Также у меня будут другие столбцы после этого VNF. Итак, в этом случае я думаю, что я не могу дать Concat право.?

4. Ничего особенного: я сопоставляю общие имена свойств (‘Solution’, ‘Operator’) в массив объектов [{title: ...., header: ...}, {...}] и добавляю к этому массиву ( .concat() ) аналогичное сопоставление повторяющихся (3 раза) свойств ‘vendor, ‘name’, ‘release’. Я обновил демонстрацию.

5. @srilakshmi: итак, вам удалось решить вашу проблему? Если мой ответ и комментарии помогли, вы можете проголосовать и принять этот ответ.

Ответ №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

Метки: