Trying to display array data in a table

App Building
1

I am trying to display array data in a table but rather than putting the values into different rows it is showing a single row with multiple values in each cell. Please advise.

image
image1484×798 82.5 KB

2

Hi @dony01, welcome to the forum! :wave:

It looks like the response of your query is an array with one element (unless there are more we can't see from the screenshot), the object with five keys: "id", "Name", "PL", "LAS", and "ALAE". Each key looks like a column, and their values, data from every row. For the table to look the way we expect, we want an array of rows.

Ideally, we would want the array to look like this:

image
image500×865 54.4 KB


We may need to update our query or do some data parsing for this to work. If this is just how your MondoDB collection is set up, we can use JS to manipulate the output.

Create a JS Transformer to parse over this data.

With the response you provided, this transformer should work if we don't need the "_id" or the "Name" keys from the response.

image
image494×534 41.6 KB

Here is the code block for you to copy and try on your end:

function transformData(apiResponse) {
    
    const plValues = apiResponse[0].PL;
    const alaeValues = apiResponse[0].ALAE;
    const lasValues = apiResponse[0].LAS;

    
    const transformedArray = plValues.map((pl, index) => ({
        PL: pl,
        ALAE: alaeValues[index],
        LAS: lasValues[index]
    }));

    return transformedArray;
}

const queryData = {{getRows.data}} 


const transformedData = transformData(queryData);

return transformedData;

Let us know if you have any questions!