Data not showing in <lightning:datatable/>

Question

I have problem displaying data in datatable.

I've tested the code with some alerts just to see if I was correctly mapping fieldName:value for the table and it is correct, but for some reason it isn't showing.

Columns for datatable are dynamic - based on multiselect picklist, and the data should be mapped appropriately for each column. The data I get from my Apex API call is List and it looks like this -->

I've made some alerts just to see if I was getting individual rows in the data and it looks like this -->

Lastly, I've made an alert to see if the fieldName and the value are mapping correctly, looks like this -->

etc.... Based on how many columns the user has selected

The for loop for filling the datatable is this (the first for loop is 0-100 because the server always returns 100 rows, second loop is based on all selected columns from user):

if(state === "SUCCESS") {
                    var responseData = response.getReturnValue();
                    //var jsonString = JSON.parse(JSON.stringify(responseData));
                    alert(responseData);
                    // used for getting the size of an List of all columns for the loop
                    var columnsList = component.get("v.columns");
                    var data=[];
                    // data for dataTable
                    for(var i=0;i<100;i++){
                        var row = responseData[i];
                        alert(row);
                        for(var j=0;j<columnsList.length;j++){
                            var column = columnsList[j].fieldName;
                            alert(column + " " + row[j]);
                            data.push({column:"row[j]"});
                        } 
                    }
                    component.set("v.dataTableData", data);
                }

What am I doing wrong?

EDIT 1 --> console.log:

EDIT 2 --> console.log(columnList);

EDIT 3 --> TypeError: Cannot read properties of undefined (reading 'forEach')

I've noticed that API returns the same column 4 times (session_id,visitor_id,timestamp,session_unique_content_impressions x4)..

NOTE: This is Dummy data, there's no privacy concerns.

Answer 1

You are pushing each row element as different row. It is your mistake.

This JS code should work for you

if(state === "SUCCESS") {
    try {
        let responseData = JSON.parse( response.getReturnValue() );
        //var jsonString = JSON.parse(JSON.stringify(responseData));
        console.log(responseData)
        // used for getting the size of an List of all columns for the loop
        var columnsList = component.get("v.columns");
        var data=[];
        // data for dataTable
        responseData.data.forEach( row => {
            console.log(row)
            let newRow = {};
            row.forEach( (element, index) => {
               newRow[columnsList[index].fieldName] = element;
            });
            data.push(newRow);
        })
        component.set("v.dataTableData", data);
    } catch (error) {
        console.error(error);
    }

}

This code will work if you get columnsList dynamically,
And the length and order in columnsList will always be the same as in the data rows which you retrieve in your Apex method.