Dynamically set column display title?

💬 Queries and Resources
, ,
6

I understand better now!

Here's what I would do, personally. I'd take the query that returns the REST API result, and add a transformer down at the bottom of the query window. You can write a little snippet of JS code that converts your result into an object with named properties. What exactly that will look like depend on what form the API is returning data as (feel free to post a snippet). Let's say as an example your API is returning a 2d array, like so:

[["Manny", 24, "Tulsa"], ["Moe", 45, "Philly"], ["Mack", 51, "NYC"]]

In your earlier post, you referenced how you have your column indexes and names defined somewhere. If possible, maybe format them a little differently than what you showed in your snippet. Instead of using a string for column name (i.e. "0" surrounded by quotes, just have an integer index for column position. So something like:

columnDefs = [{position: 0, name: "columnA"}, {position: 1, name: "columnB"}]

So in your query transformer, take the data returned by the API, and do something like:

function transform() {
//define and run in transformer section of query


  let columnDefs = [{
    position: 0, // try to have this as an integer rather than a string
    name: "columnA" 
  }, {
    position: 1,
    name: "columnB"
  }];
  
  // Dependent on how your API returns data
  let apiData = [
    ["Manny", 24, "Tulsa"],
    ["Moe", 45, "Philly"],
    ["Mack", 51, "NYC"]
  ];
  
  let newData = apiData.map(function(x) {
    let row = {};
    // logging statements for easy debugging
    console.log(columnDefs[0].name);
    console.log(x[0]);
    // you can parameterize this in a for loop if you feel like it
    row[columnDefs[0].name] = x[0];
    row[columnDefs[1].name] = x[1];
    console.log(row); 
    return row;
  });
  return newData;
}
console.log(transform());

Here's a little fiddle where you can play around with it.
This should return:

[{
  columnA: "Manny",
  columnB: 24
}, {
  columnA: "Moe",
  columnB: 45
}, {
  columnA: "Mack",
  columnB: 51
}]

Once it's in this form, the Retool table will populate your column names automatically. Make sense?