2

I have problem displaying data in datatable.

Empty 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 -->

Data

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

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

FieldName FieldName1

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:

json response console.log(elements)

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

enter image description here

enter image description here

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

typeError

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.

2
  • 1
    I would better show the data to Browser Console using console.log(responseData); to see what data you are getting. Sep 6, 2022 at 11:07
  • 1
    Thank you. I've updated my question with console.log.
    – Stojchesky
    Sep 6, 2022 at 11:15

1 Answer 1

3

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.

6
  • The data isn't showing even tho I have columnList dynamically. I've updated the question with console log. Also, I tried console.log(newRow); but it doesn't show. Any thoughts?
    – Stojchesky
    Sep 6, 2022 at 13:52
  • @Stojcheski Check if you need to call responseData.data.forEach or just responseData.forEach. Also I updated the answer in some way. Try the latest code from the answer. Sep 6, 2022 at 14:31
  • I've updated my question - Edit 3, I tried responseData.forEach - got forEach is not a function - then I tried the updated code and I got TypeError.
    – Stojchesky
    Sep 6, 2022 at 14:51
  • @Stojcheski Ok, You need to parse your data into Object, as from Apex you get String. I added let responseData = JSON.parse( response.getReturnValue() ); to the answer. Sep 6, 2022 at 15:07
  • That worked. You saved me tons of time. You rock.
    – Stojchesky
    Sep 6, 2022 at 15:17

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .