How to display multiple arrays containing nested object in one dataTable?

chanmi

Here is my JSON:

{
"supplyEntrList": [
    {"code":"SE00539","name":"SupplyEntr1"},
    {"code":"SE00040","name":"SupplyEntr2"}, 
    ...(repeated)
],
"connerTypeList":[
    {"code":"1","name":"Conner Type1"},
    {"code":"2","name":"Conner Type2"},
    {"code":"3","name":"Conner Type3"},
    {"code":"4","name":"Conner Type4"}
],
"planDtlList":[
    {"UPDT":"2017-12-22 17:07","PLANDTLEDTIME":"100000","PRIORITY":1,"STSCD":"0","PLANDTLPRODCNT":15,"PLANDTLSTDT":"20171213","SUPPLYENTRNM":"Entr1","LIMITPRODYN":"N","REGID":"dev01","PLANSQ":50084,"UPID":"dev01","SUPPLYENTRCD":"SE00082",""WMGB":"A","PLANDTLEDDT":"20171221","CONNERNM":"Conner1","CONNERTYPE":"3","PLANDTLSQ":125730,"PLANDTLSTTIME":"155500"},
    {"UPDT":"2017-12-27 14:37","PLANDTLEDTIME":"100000","PRIORITY":2,"STSCD":"0","PLANDTLPRODCNT":15,"PLANDTLSTDT":"20171213","SUPPLYENTRNM":"Entr2","LIMITPRODYN":"N","REGID":"dev01","PLANSQ":50084,"UPID":"dev01","SUPPLYENTRCD":"SE00513","WMGB":"A","PLANDTLEDDT":"20171221","CONNERNM":"Conner2","CONNERTYPE":"3","PLANDTLSQ":125733,"PLANDTLSTTIME":"155500"},],
"stsCdList":[
    {"code":"0","name":"requested"},
    {"code":"1","name":"accepted"},
    {"code":"2","name":"soldout"},
    {"code":"9","name":"deleted"}
]
}

which includes 4 different arrays and I hope to display all data in one dataTable.

Also Here is my script:

var connerTable = $('#connerTable').DataTable({
            scrollX: true,
            searching: false,
            ajax: {
                url: '/api/plan/getPlanDtlList?planSq='+$('#planSq').val(),
                type: 'GET',
                contentType: 'application/json',
                dataSrc: function(d) {
                    return new Array(d);
                }
            },
            columns: [
                { data: null, defaultContent: '', className: 'select-checkbox', orderable: false },
                { data: 'planDtlList.PLANDTLSQ',
                    render: function(data, type, row) {
                        return data == null || data == 0 || data === undefined ? 
                                '' : '<a href="javascript:attachPlanMngtConnerProdDataTable('+data+');">'+data+'</a> \
                                <input type="hidden" value="'+data+'" name="planDtlSq" id="hiddenPlanDtlSq" />';
                    }
                },
                { data: 'planDtlList.CONNERNM', defaultContent: '', render: editIcon },
                { data: 'planDtlList.CONNERTYPE', defaultContent: '', 
                    render: function(data, type, row) {
                        return '<select name="connerType"> \
                                    <option value="">Choose one</option>'
                                    + generateOptions(data, row.connerTypeList)
                                +'</select>';
                    }
                },
                { data: 'planDtlList.PLANDTLPRODCNT', defaultContent: '0' },
                {   data: 'planDtlList.SUPPLYENTRCD', defaultContent: '', 
                    render: function(data, type, row) {
                        return '<select name="supplyEntrCd"> \
                                    <option value="">Choose one</option>'
                                    + generateOptions(data, row.supplyEntrList)
                                + '</select>';
                    }
                },
                { data: 'planDtlList.PRIORITY', defaultContent: '', render: editIcon },
                {   data: 'planDtlList.STSCD', defaultContent: '', 
                    render: function(data, type, row) {
                        return '<select name="stsCd" > \
                                    <option value="">Choose one</option>'
                                    + generateOptions(data, row.stsCdList)
                                + '</select>';
                    }
                },
                { data: 'planDtlList.PLANDTLSTDT', defaultContent: '', render: editIcon },
                { data: 'planDtlList.PLANDTLSTTIME', defaultContent: '', render: editIcon },
                { data: 'planDtlList.PLANDTLEDDT', defaultContent: '', render: editIcon },
                { data: 'planDtlList.PLANDTLEDTIME', defaultContent: '', render: editIcon },
                { data: 'planDtlList.REGID', defaultContent: '' },
                { data: 'planDtlList.UPID', defaultContent: '' },
                { data: 'planDtlList.UPDT', defaultContent: '' },
            ],
        });
        
        function generateOptions(data, target) {
            var options = new Object();
            
            if (target != undefined || target != null) {
                for (var i = 0; i < target.length; i++) {
                    
                    if (data != null && data == target[i].code) {
                        options[i] = '<option value="'+target[i].code+'" selected>['+target[i].code+'] '+target[i].name+'</option>';
                    } else {
                        options[i] = '<option value="'+target[i].code+'">['+target[i].code+'] '+target[i].name+'</option>';
                    }
                }
            }
            
            return JSON.stringify(options);
        }

I wonder if it is possible to replace some rows (e.g. CONNERTYPE, SUPPLYENTRCD, STSCD) into select-box using render option or any other features. With the configuration above, it shows only a message saying that there is no data available in table.

What am I missing?