How to perform multiple array filtering

My advice would be to merge the two arrays. This will remove a lot of complexity and make your code super easy to read. There are many ways to solve this problem, but the following is how I would do it.

Firstly I create a dictionary for the app array using the reduce function. This gives me the benefit of having indexes which correlate with the ids in the items array, allowing me to directly access each app item without looping the entire array.

Once I have the dictionary, I can easily perform the merge by mapping the items array and creating a new object for each item containing the original item + the app item from the appDict.

Now you have a single array with everything you need to solve the problem, and you remain within the O(n) time complexity.

const items = [
  {id:1, name:'Item 1', appId:10},
  {id:2, name:'Item 2', appId:20},
  {id:3, name:'Item 3', appId:20},
  {id:4, name:'Item 4', appId:30}
]
const apps = [
  {id:10, address:'Some street 1', city:'City 1'},
  {id:20, address:'Some street 2', city:'City 2'},
  {id:30, address:'Some street 3', city:'City 3'}
];
const appDict = apps.reduce((acc, {id, ...rest})=> ({...acc, [id]: rest}), {})
const combinedArr = items.map(item=>({...item, ...appDict[item.appId]}))

If you want to keep track of multiple items, consider this simple example. Pretend App ID 10 and 30 are selected. You need to map the app array to contain the original information as well as the selected-item results like this:

let items = [
  { id: 1, name: "Item 1", appId: 10 },
  { id: 2, name: "Item 2", appId: 20 },
  { id: 3, name: "Item 3", appId: 20 },
  { id: 4, name: "Item 4", appId: 30 },
];

let apps = [
  { id: 10, address: "Some street 1", city: "City 1" },
  { id: 20, address: "Some street 2", city: "City 2" },
  { id: 20, address: "Some street 2", city: "City 2" },
  { id: 30, address: "Some street 3", city: "City 3" },
];

const selectedAppIDs = [10, 30];

const result = apps
  .filter((app) => selectedAppIDs.includes(app.id))
  .map((app) => ({
    ...app,
    selectedItems: items.filter((x) => x.appId === app.id),
  }));

console.log(JSON.stringify(result));

Results:

[{"id":10,"address":"Some street 1","city":"City 1","selectedItems":[{"id":1,"name":"Item 1","appId":10}]},{"id":30,"address":"Some street 3","city":"City 3","selectedItems":[{"id":4,"name":"Item 4","appId":30}]}]

Check out this example

[UPDATED]

This code should suit your needs exactly:

let items = [
    {id: 1, name: 'Item 1', appId: 10},
    {id: 2, name: 'Item 2', appId: 20},
    {id: 3, name: 'Item 3', appId: 20},
    {id: 4, name: 'Item 4', appId: 30}
]

let apps = [
    {id: 10, address: 'Some street 1', city: 'City 1'},
    {id: 20, address: 'Some street 2', city: 'City 2'},
    {id: 20, address: 'Some street 2', city: 'City 2'},
    {id: 30, address: 'Some street 3', city: 'City 3'}
]

this.dataSource = items.filter(x => apps.findIndex(y => y.id === x.appId) >= 0);

Explanation

We run filter on the items array, which goes through every element of that array, and checks if the function you pass in returns true or not for that element. It adds elements that pass this test to a new array, and returns that array.

The function we pass in for that check, x => apps.findIndex(y => y.id === x.appId) >= 0 uses another utility function in Arrays, findIndex, which works a lot like filter. The exception is that it only returns one item, and the place it is in the array. We pass in the function y => y.id === x.appId, which sees if the item we're checking in the apps array is the one we're looking for. If it doesn't find the item, it returns -1, so we just check against it.

I hope this helps~!!

The answer using .filter(...includes...).map(...) combines nested linear operations which results in quadratic time complexity. The answer using .filter(...findIndex...) has the same problem.

Here's a minimal reproducible example. This solution uses -

• efficient Set for fast O(1) lookups
• useMemo to avoid wasted computation
• flatMap to combine filter->map in a single pass

function App({ items, apps }) {
  const [selected, setSelected] = React.useState(_ => new Set())
  const selectedApps = React.useMemo(
    () => new Set(Array.from(selected, s => s.appId)),
    [selected]
  )
  const select = item => event => {
    const s = new Set(selected)
    if (s.has(item)) s.delete(item)
    else s.add(item)
    setSelected(s)
  }
  return <div>
    {items.map((item, key) =>
      <div>
        <input
          key={key}
          type="checkbox"
          checked={selected.has(item)}
          onClick={select(item)}
        />
        {item.name}
      </div>
    )}
    {apps.flatMap((app, key) =>
      selectedApps.has(app.id)
        ? [<pre key={key}>{JSON.stringify(app)}</pre>]
        : []
    )}
  </div>
}

const items = [{id:1, name:'Item 1', appId:10},{id:2, name:'Item 2', appId:20},{id:3, name:'Item 3', appId:20},{id:4, name:'Item 4', appId:30}]
const apps = [{id:10, address:'Some street 1', city:'City 1'},{id:20, address:'Some street 2', city:'City 2'},{id:20, address:'Some street 2', city:'City 2'},{id:30, address:'Some street 3', city:'City 3'}]

ReactDOM.render(<App items={items} apps={apps} />, document.body)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js"></script>