Table 数据来自 Json 数组，如何添加多个子行

Question

我有一个 html table，其中的行和子行填充了来自 json 数组的数据。我遇到的问题是： - json 数组中的对象可能包含也可能不包含多个对象数组，需要将其添加为子行。 - 我无法从主对象中获取子对象（交互）数组下面给出json数组的一个对象。

到目前为止，我已经成功地用数据填充了 table 行。我也可以填充一个子行，但只能使用对象根部的数据。

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数组构建table。我会开始处理它。我建议您使用 .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();
}

处理完响应后，我只需要将它连接到 table。

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

查看有效的片段代码 here。

请注意，您应该使用 DOM API to manipulate HTML elements in a better way 而不是使用 .innerHTML 注入字符串。使用 JQuery.

更容易

Table 数据来自 Json 数组，如何添加多个子行

Table with data from Json array, how to add multiple child rows

html

javascript

html-table

datatables-1.10