Combine different queries and return the selected combined result to a table

How do you combine data from two queries or APIs and bind it onto a table widget?

Say you have two queries named genderQuery and nameEmailQuery and wanted to combine them together, you can use simple JS when binding the data.

Note that, you’ll need to use an identifier to match the rows of each query.

Following is the JS function binded onto the Table Data property:

{{
function(){
	let combindedData = genderQuery.data.map((item) => {
   		const user = nameEmailQuery.data.find((userItem) => item.id == userItem.id) || {};
   		return { ...item, ...user };
		})
		return combindedData;
}()
}}

We first map on query one, use an identifier to match rows in query two and return the combined data using the spread operator.

The following question is also discussed on How Do I Do X on Appsmith Session on our community call. Watch it here: How Do I Do X? - YouTube