Issue
I have a table generated from an API request that contains a list of projects identified by a "uid" value. I want to use each "uid" value as a parameter for another API request and add the output in a new column. However, my current approach only retrieves the "uid" value of the first row instead of each row. I need help figuring out how to loop over all the rows and make a request for each row, and then merge the responses with the values in the first API response.
Resolution
The solution involves using JSObjects to loop over each row in a table generated from an API request, and using the uid value of each row as a parameter for another API request. The response from the second request can be stored using storeValue(uid, response). Then, a function can be written to iterate over the first API response and merge it with the stored values using JSObjects.
The code can be added to the onPageLoad function. The first loop would be similar to the following example:
for (let row of projects_table.data) {
api.run("second_api_request", {
query: { uid: row.uid }
}).then((response) => {
appsmith.storeValue(row.uid, response)
})
}
The second function to merge the data would look something like this:
function mergeData(data1, data2) {
let mergedData = []
for (let row of data1) {
let uid = row.uid
let secondData = appsmith.getStoreValue(uid)
mergedData.push({...row, ...secondData})
}
return mergedData
}
This function can be used to populate a Computed column in the table widget with the merged data:
mergeData(projects_table.data, "second_api_request").map((row) => ({
...row,
second_res: row.second_api_request.data.property
}))
Overall, the solution requires using storeValue and getStoreValue to store and access the responses from the second API request, and then using JSObjects to merge the data with the first API response.