Click one table row to populate another table

App Building
1

Hi, I have a recipe table in dynamodb whose data is like below (bottom getRecipes response):

I have one table where it shows recipe names and the other table we have ingredient list. I want to populate the ingredient table on clicking the recipe row.

I tried creating transformer like this:
const items = {{ getRecipes.data.Items }}
return (items.filter(row => row.INGREDIENTS < {{ table1.selectedRowKey}}))

and gave this transformer as source of table2 but that didnt help, Can someone guide; i am new to retool

Response of getRecipes:
{
"$metadata": {
"httpStatusCode": 200,
"requestId": "K327U2QLR7RF5MSAM86G3D36TRVV4KQNSO5AEMVJF66Q9ASUAAJG",
"attempts": 1,
"totalRetryDelay": 0
},
"Count": 2,
"Items": [
{
"INGREDIENTS": {
"L": [
{
"M": {
"name": {
"S": "All purpose flour"
},
"unit": {
"S": "lb"
},
"quantity": {
"S": "0.33"
}
}
},
{
"M": {
"name": {
"S": "Pista"
},
"unit": {
"S": "oz"
},
"quantity": {
"S": "1.06"
}
}
},

      {
        "M": {
          "name": {
            "S": "Sugar"
          },
          "unit": {
            "S": "lb"
          },
          "quantity": {
            "S": "0.1"
          }
        }
      }
    ]
  },
  "CATEGORY": {
    "S": "CBY"
  },
  "RECIPE_NAME": {
    "S": "TEMP2324"
  }
},
{
  "INGREDIENTS": {
    "L": [
      {
        "M": {
          "name": {
            "S": "All purpose flour"
          },
          "unit": {
            "S": "lb"
          },
          "quantity": {
            "S": "0.4"
          }
        }
      },
      {
        "M": {
          "name": {
            "S": "Milk powder"
          },
          "unit": {
            "S": "oz"
          },
          "quantity": {
            "S": "1.41"
          }
        }
      },
   
      {
        "M": {
          "name": {
            "S": "Oil"
          },
          "unit": {
            "S": "gal"
          },
          "quantity": {
            "S": "0.03"
          }
        }
      },
      {
        "M": {
          "name": {
            "S": "Sugar"
          },
          "unit": {
            "S": "lb"
          },
          "quantity": {
            "S": "0.31"
          }
        }
      },

      {
        "M": {
          "name": {
            "S": "Vinagar"
          },
          "unit": {
            "S": "lt"
          },
          "quantity": {
            "S": "0.0075"
          }
        }
      },
      {
        "M": {
          "name": {
            "S": "Almond"
          },
          "unit": {
            "S": "oz"
          },
          "quantity": {
            "S": "0.35"
          }
        }
      }
    ]
  },
  "CATEGORY": {
    "S": "CBY"
  },
  "RECIPE_NAME": {
    "S": "Temp recipe"
  }
}

],
"ScannedCount": 2
}

2

Hi @Manjit_Singh Thanks for reaching out! It looks like INGREDIENTS is an object with an array of nested objects. You'll need to add some logic to determine which part of the Ingredients object should be compared to {{ table1.selectedRowKey}}.

For example, if you wanted to compare the total number of ingredients per row to the selectedRowKey, you could write:

const items = {{ getRecipes.data.Items }}
return (items.filter(row => row.INGREDIENTS.L.length < {{ table1.selectedRowKey}}))

It's a little hard for me to tell without more info about your data. What value do you want to compare to {{ table1.selectedRowKey}}? What data is in table1?

3