Таблица с данными из массива Json, как добавить несколько дочерних строк

Question

У меня есть HTML-таблица со строками и дочерними строками, которые заполнены данными из массива json.Проблема, с которой я столкнулся: - Объекты в массиве json могут содержать или не содержать несколько массивов объектов, которые необходимо добавить как дочернюю строку.- Я не могу получить массив дочерних объектов (взаимодействий) из основного объекта. Объект массива json приведен ниже.

Пока мне удалось заполнить строки таблицы данными.Я также могу заполнить одну дочернюю строку, но только данными из корня объекта.

json object:
[
    {
        "name": "XXXXXXX",
        "firstName": "XXXXXXX",
        "contactnr1": "+123456789",
        "wrapup": "WRAPUP",
        "agent": "SUMO",
        "date": "05/02/2019 10:10:30",
        "totalAttempts": "2",
        "interactions": [
            {
                "agent": "SUMO",
                "interactionAlertStart": "02-05-2019 22:04:30",
                "interactionStart": "02-05-2019 22:04:32",
                "interactionCallStart": "02-05-2019 22:04:38",
                "interactionCallEnd": "02-05-2019 22:05:04",
                "interactionWrapupStart": "02-05-2019 22:05:16",
                "interactionWrapupEnd": "02-05-2019 22:05:16",
                "interactionEnd": "02-05-2019 22:05:26",
                "interactionType": "XXXXX",
                "interactionDuration": "54 s",
                "queue": "XXXX",
                "wrapup": "WRAPUP 1",
                "dnis": "tel:+123456789"
            },
            {
                "agent": "SUMO",
                "interactionAlertStart": "02-05-2019 22:10:29",
                "interactionStart": "02-05-2019 22:10:36",
                "interactionCallStart": "02-05-2019 22:10:52",
                "interactionCallEnd": "02-05-2019 22:11:00",
                "interactionWrapupStart": "02-05-2019 22:11:12",
                "interactionWrapupEnd": "02-05-2019 22:11:12",
                "interactionEnd": "02-05-2019 22:11:14",
                "interactionType": "Callback",
                "interactionDuration": "37 s",
                "queue": "YYYY",
                "wrapup": "WRAPUP 2",
                "dnis": "tel:+987654321"
            }
        ]
    },

++++++++++++++++++++++
javascript:

// function for formatting row details
function format (d) {
    // 'd' is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
                '<tr>' +
                    '<td>Agent:</td>' +
                    '<td>Datum:</td>' +
                    '<td>Contactnr:</td>' +
                    '<td>' + d.queue+ '</td>' +
                '</tr>' +
                '<tr>' +
                    '<td>Contactnummer:</td>' +
                    '<td>' + d.interactionStart+ '</td>' +
                '</tr>' +  
                '<tr>' +
                    '<td>TotaalPoging</td>' +
                    '<td>' + d.interactionEnd+ '</td>' +
                '</tr>' +
            '</table>';
}

$(document).ready(function() {
    var table = $('#example').DataTable({
        'ajax': {
            'url': 'http://127.0.0.1:8088/campaigns/contacttable?orgName=xxx&campaignId=yyyy-yyyy-yyyy-yyyy',
            'dataSrc': ''
        },
        'columns': [
            {
                'className': 'com-table',
                'orderable': false,
                'data': null,
                'defaultContent': ''
            },
            {'data': 'name'},
            {'data': 'firstName'},
            {'data': 'contactnr1'},
            {'data': 'totalAttempts'}
        ],
        'order': [[1, 'asc']]
    });
});

Итак, чтобы сделать вывод: яхочу динамически добавлять данные из взаимодействий как дочерние строки.Объект может иметь несколько взаимодействий, только одно взаимодействие или отсутствие взаимодействия.Мой текущий код JavaScript ниже массива json

Answer 1

Если я правильно понял, вы хотите построить таблицу на основе этого interactions массива.Я бы начал обрабатывать это.Я рекомендую вам использовать метод .map() для создания массива строк.

 function processResponse(res){
  var interactions = response[0].interactions;

 // If no interactions, you may to return a single row

 if(!interactions || interactions.length === 0){
      return '<tr><td>No interactions to display.</td></tr>'  
 }

 var interactionsRows = interactions.map(function(interaction){
      return '<tr>' +
            '<td>Agent:</td>' +
            '<td>Datum:</td>' +
            '<td>Contactnr:</td>' +
            '<td>' + interaction.queue+ '</td>' +
        '</tr>' +
        '<tr>' +
            '<td>Contactnummer:</td>' +
            '<td>' + interaction.interactionStart+ '</td>' +
        '</tr>' +  
        '<tr>' +
            '<td>TotaalPoging</td>' +
            '<td>' + interaction.interactionEnd+ '</td>' +
        '</tr>'
 });

 // Concatenate the rows into one string
 return interactionsRows.join();
}

После обработки ответа мне просто нужно объединить его в таблице.

 document.getElementById('table').innerHTML = processResponse(response)

См. Код сниппета, работающий здесь .

Обратите внимание, что вы должны использовать DOM API , чтобы лучше управлять элементами HTML вместо того, чтобы вводить строки, используя .innerHTML.Проще использовать JQuery.