Match records between tables

Hi I have a query (listCompetitors) result in a table

ID | Name | Competitor_name

  1. | A. | ["A1", "A2, "A3"]
  2. | B. | ["B1", "B2, "B3"]

Now when I select a row on another table, if the column id's value (which is a string) on TableA.selectedRow.data includes in or match with listCompetitors.data.id (which is an array), then it will return the array of competitor_name in a text field.

I tried to put this on the text field but it didn't work.

{{ listCompetitors.data.competitor_name
.filter(item => item.id.includes(TableA.selectedRow.data.id))
.map(item => item.competitor_name)
.join(", ")
}}

Appreciate your feedback.

When I am figuring out chained array operators like this and my brain is about to explode, I break it down into smaller chunks.

Do the .filter to see if it is returning what you expect. Then add the the .map and so on.

If needed I will make them more verbose and set a debugger; in there so I can step through it in Chrome Dev tools. If you are not comfortable in Dev Tools (or it decides to stop working as sometimes happens) you can throw in some console.log:

console.log(listCompetitors.data.competitor_name)
const result = listCompetitors.data.competitor_name.filter(item => {
  debugger
  const incl =  item.id.includes(TableA.selectedRow.data.id))
  console.log(incl)
  return include
}

Thanks Bradly

I have decided to create a master table to have all of the column values in one place instead of mapping ones to another to simplify the problem. :sweat_smile: