Map/Link array item to key of another Object-CodePudding

I am trying to generate a report page with the code below. Issue is that, i am unable to pick listTDRender[k] equivalent array values from objItems[i] object. I get a "Uncaught TypeError: Cannot read properties of undefined (reading '0')" error.

Current workflow Step 1 - Fetch config (generate list array) and split values <-- Success Step 2 - Make multiple SPO calls with config above <-- Success Step 3 - Generate multiple tables with output <-- Failure due unable to map values

function loadReport() {
    for (var j = 0; j < list.length; j  ) {
        const listVal = list[j].split(",");
        const listFieldRender = listVal[2].replaceAll('|',',');
        var listTDRender = listVal[2].split("|");                       
        $.ajax({
            async: false,
            url: "SPO/_api/web/lists/getbytitle('"   listVal[0]   "')/items?$select=Created,EncodedAbsUrl,"  listFieldRender  "&$top=2&$orderby=Created desc",
            type: "GET", headers: {"accept": "application / json;odata = verbose"},
            success: function(data) {
                var objItems = data.d.results;
                var tableContent = '<table id="'   listVal[1]   '" style="width:100%;"><caption >'   listVal[1]   '</caption>';
                for (var i = 0; i < objItems.length; i  ) {
                     tableContent  = '<tr>';
                        for (var k = 0; k < listTDRender.length; k  ) {
                            tableContent  = '<td>'   objItems[i].listTDRender[k]   '</td>';
                        }
                     tableContent  = '</tr>';
                }
               $('#renderReport').append(tableContent);
            },
            error: function(error) {
                alert(JSON.stringify(error));
            }
        });
    }
}

Sample data below

list
[
    "ABC,ABC Report,DistrDate|Rev|Owner",
    "DEF,DEF Report,DistrDate|Rev|Owner",
    "GHI,GHI Report,DistrDate|Owner",
    "JKL,JKL Report,distrDate|Owner"
]

listTDRender
[
    "DistrDate",
    "Rev",
    "Owner"
]

objItems
{
    "d": {
        "results": [
            {
                "DistrDate": "2021-10-19T03:03:00Z",
                "Rev": 0,
                "Owner": "ABC",
                "Created": "2021-10-19T03:03:00Z",
                "EncodedAbsUrl": "URL"
            },
            {
                "DistrDate": "2021-10-18T03:02:49Z",
                "Rev": 0,
                "Owner": "ABC",
                "Created": "2021-10-18T03:02:49Z",
                "EncodedAbsUrl": "URL"
            }
        ]
    }
}

CodePudding user response：

It must be objItems[i][listTDRender[k]], not objItems[i].listTDRender[k].

You don't want to access a property named listTDRender, but a property, where the name equals the content of listTDRender[k].