How to set the dynamic column names for the following scenario

App Building
1

image
image1920×1143 153 KB

How can I show these as dynamic column names? I tried {{ item }} it seems to return Mapped Array (0).

2

Hey @khatanaashish! I filed a request to make this feature work as you'd expect, but for now, it's a bit tricky and won't really work the way you currently have it set up (as you've already seen :sweat_smile: )

In the meantime, I'd personally just use some Javascript in a transformer to loop through your data set and change the keys. Something like this:

const keysToReplace = ['key1', 'key2', 'key3']; // Replace with your desired keys. e.g. transformer2.value
const oldKeys = {{Object.keys(query4.data)}}
const oldDataArray = {{formatDataAsArray(query4.data)}}
// Replacd query4.data with your desired data object. If it's an array of objects, oldKeys = Objects.keys (ormatDataAsObject(query4.data)) and oldDataArray = query4.data
const newArray = oldDataArray.map(obj => {
  const newObj = {};
  keysToReplace.forEach((key, i) => {
    newObj[key] = obj[oldKeys[i]];
  });
  return newObj;
});

return newArray;

Let me know how it goes!

3

Thanks @victoria . I was able to achieve the same using the following:

// Input data from the table
const inputData = {{table.data}}; // Replace with your actual data source

// Create an array to store the combined data
const outputData = [];

// Create a set of all unique dates
const allDates = new Set();

// Iterate through the input data to populate allDates and the outputData
inputData.forEach(row => {
const { Account_ID, Product_ID, Proj_Dt } = row;

// Parse the Proj_Dt date
const projDate = new Date(Proj_Dt);
const formattedProjDate = projDate.toISOString().split('T')[0]; // Format to "yyyy-MM-dd"

allDates.add(formattedProjDate);

// Create a new object for each row with the accumulated dates
const combinedRow = {
Account_ID,
Product_ID,
Proj_Dt,
[formattedProjDate]: "", // Create a property with the formatted date and set it to an empty string
};

outputData.push(combinedRow);
});

// Iterate through outputData to ensure allDates are present for each combination
outputData.forEach(row => {
allDates.forEach(date => {
if (!row[date]) {
row[date] = "";
}
});
});

return outputData;

1 Like
4

Oh wow, that's great. I appreciate all the comments and helpful variable names. Thank you so much for sharing! Hopefully we can make this more intuitive in the product soon. :pray: