Map/Link array item to key of another Object

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%20desc",
            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 class="text-info">' + 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"
            }
        ]
    }
}

Answer

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].