包含来自 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)

查看运行的 sn-p 代码here。

请注意，您应该使用DOM API 来操作better way 中的HTML 元素，而不是使用.innerHTML 注入字符串。使用 JQuery 更容易。