表中包含来自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更容易。