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