How to Handle Nested Data in Retool

1// Example nested API response shape:
2// query1.data = {
3//   users: [
4//     {
5//       id: 1,
6//       profile: {
7//         name: 'Alice Smith',
8//         email: 'alice@example.com',
9//         address: { city: 'Austin', state: 'TX' }
10//       },
11//       tags: ['vip', 'premium'],
12//       stats: { order_count: 15, total_spent: 2450.00 }
13//     }
14//   ]
15// }

1// REST API with envelope: query1.data = { users: [...] }
2// Access the array:
3{{ query1.data.users }}
4
5// Access the first user's email:
6{{ query1.data.users[0].profile.email }}
7
8// Access selected row's nested city (in master-detail layout):
9{{ table1.selectedRow.profile?.address?.city ?? 'City not set' }}
10
11// Access a nested stats field:
12{{ table1.selectedRow.stats?.total_spent?.toLocaleString('en-US', { style: 'currency', currency: 'USD' }) }}

1// Query transformer (in the Transform tab of your REST query):
2// The API returns: { data: [...users...], total: 450, page: 1 }
3
4// Extract just the users array:
5return data.data || data.users || data.results || data;
6
7// Or if you need to keep the metadata:
8return {
9  users: data.data || [],
10  total: data.total || 0,
11  currentPage: data.page || 1
12};
13// Then access as query1.data.users in the table

1// Transformer: flattenedUsers
2// Input: query1.data (array with nested profile objects)
3// Output: flat objects ready for table display
4
5const users = query1.data || [];
6
7return users.map(user => ({
8  id: user.id,
9  name: user.profile?.name ?? 'Unknown',
10  email: user.profile?.email ?? '',
11  city: user.profile?.address?.city ?? '',
12  state: user.profile?.address?.state ?? '',
13  tags: Array.isArray(user.tags) ? user.tags.join(', ') : '',
14  orderCount: user.stats?.order_count ?? 0,
15  totalSpent: user.stats?.total_spent ?? 0
16}));

1// In a Table column 'Value' expression:
2{{ Array.isArray(currentRow.tags) ? currentRow.tags.join(', ') : (currentRow.tags ?? 'None') }}
3
4// For a count of items in an array field:
5{{ (currentRow.permissions || []).length + ' permissions' }}
6
7// In a transformer, convert nested array of objects to string:
8return data.map(row => ({
9  ...row,
10  // Convert [{name: 'admin'}, {name: 'editor'}] to 'admin, editor'
11  roleNames: Array.isArray(row.roles)
12    ? row.roles.map(r => r.name).join(', ')
13    : ''
14}));

1// Safe access to deep nesting:
2{{ query1.data[0]?.profile?.address?.city ?? 'Unknown' }}
3
4// In a transformer:
5return data.map(row => ({
6  id: row.id,
7  city: row?.profile?.address?.city ?? 'Unknown',
8  primaryPhone: row?.contact?.phones?.[0]?.number ?? 'N/A',
9  latestOrderDate: row?.orders?.[0]?.created_at
10    ? new Date(row.orders[0].created_at).toLocaleDateString()
11    : 'No orders',
12  metadataValue: row?.metadata?.customFields?.preferredContact ?? 'email'
13}));

1// Form field default values from nested selected row:
2// Name input default: {{ table1.selectedRow.profile?.name ?? '' }}
3// City input default: {{ table1.selectedRow.profile?.address?.city ?? '' }}
4// State input default: {{ table1.selectedRow.profile?.address?.state ?? '' }}
5
6// JS Query triggered on row select to flatten into a state var:
7// Event handler: table1 → Row selected → Run JS Query 'flattenSelectedRow'
8const row = table1.selectedRow;
9await selectedUserState.setValue({
10  name: row.profile?.name ?? '',
11  email: row.profile?.email ?? '',
12  city: row.profile?.address?.city ?? '',
13  state: row.profile?.address?.state ?? '',
14  tags: row.tags?.join(', ') ?? ''
15});
16// Note: setValue() is async — do not read selectedUserState immediately after