Steps for filtering multiple arrays simultaneously

Question

Steps for filtering multiple arrays simultaneously

Currently, I am working with two arrays that share a mutual ID, allowing me to connect them. However, I am facing a challenge with filtering.

In the first array, there is a list of items with checkboxes next to each item. When I select a checkbox, I want to filter and display corresponding items from the second array in a table by matching the mutual ID.

The issue arises when I perform multiple selections. I expect to see multiple results, but due to using the .filter method, I only get one result (the last selected checkbox).

If I select checkboxes for Item 1 and Item 2, I anticipate seeing 3 results (ids 10, 20(x2)) from the 'apps' array in the lower table. And if I deselect a checkbox, the corresponding results should be removed from the table.

 
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 = this.items.filter(x => x.appId == apps.id)

https://i.sstatic.net/4OpRR.png

Thank you.

UPDATE

With Rohit's solution, I have successfully achieved my initial goal. However, a new challenge has emerged - selecting a checkbox in the first array clears all previously selected checkboxes in the second array. Any suggestions on how to address this issue?

I have included before and after images. After selecting the checkbox for Item 1, I expect the checkboxes for Some street 9 and Some street 10 to remain selected.

Here is my HTML code:


<table mat-table [dataSource]="dataSourceObjects" class="mat-elevation-z8">
  <ng-container matColumnDef="objectChBox">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let element">
      <mat-checkbox
        class=""
        [checked]="element.chbxActive"
        (change)="checkSingleObject($event, element)"
      >
      </mat-checkbox>
    </td>
  </ng-container>

  <ng-container matColumnDef="address">
    <th mat-header-cell *matHeaderCellDef>Address</th>
    <td mat-cell *matCellDef="let element">{{element.address}}</td>
  </ng-container>

  <ng-container matColumnDef="city">
    <th mat-header-cell *matHeaderCellDef>City</th>
    <td mat-cell *matCellDef="let element">{{element.city}}</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumnsObjects"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumnsObjects;"></tr>
</table>

https://i.sstatic.net/2SOeX.png https://i.sstatic.net/gKLXW.png

javascript angular typescript

Answer 1

Answer №1

After reviewing your current set-up, it appears that the `apps` variable is an array. In order to access its items, you need to use the index and cannot directly access them using dot notation.

Since users can select multiple items, we should check for the `id` in the `apps` array based on the `appId` selected from the `items` array using checkboxes.

For demonstration purposes, I am assigning the `appId`s 10 and 20 directly to an array, and then fetching the corresponding results from the `apps` array using the Array#filter method along with the Array#includes method.

// Apps array
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'}
];

// Selected items array.
const selctedItems = [10, 20];

const result = apps.filter(({ id }) => selctedItems.includes(id));

// result
console.log(result);

Update : Detailed working demo as requested by the author (Comments have been added within the code snippet below).

// Input Array 1
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}
];

// Input Array 2
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'}
];

// Element where checkboxes will be bound. 
var myDiv = document.getElementById("checkBoxes");

// Dynamically create checkboxes for each object in "items" array and bind them to the "myDiv" element representing "checkBoxes".
for (var i = 0; i < items.length; i++) {
  var checkBox = document.createElement("input");
  var label = document.createElement("label");
  checkBox.type = "checkbox";
  checkBox.value = items[i].appId;
  myDiv.appendChild(checkBox);
  myDiv.appendChild(label);
  label.appendChild(document.createTextNode(items[i].name));
}

// Obtain all checkbox elements for iteration.
var cbs = document.querySelectorAll('input[type="checkbox"]');

// Store selected checkbox values in this variable.
let selectedItems = [];

// Iterate over each checkbox element and trigger an "onchange" event.
cbs.forEach(function(item) {
  item.onchange = getCheckBoxValue;
});

// Method to retrieve all selected checkbox values into an array.
function getCheckBoxValue() {
  selectedItems = [];
  cbs.forEach(function(item) {
    if (item.checked) {
      if (!selectedItems.includes(item.value)) {
        selectedItems.push(item.value)
      }
    }
  });
  getFilteredValuesFromAnotherArr();
}

// Final method used to fetch the selected values from another array based on the selections made.
function getFilteredValuesFromAnotherArr() {
  console.log(apps.filter(({ id }) => selectedItems.includes(id.toString())));
}

<div id="checkBoxes"></div>

Answer 2

After reviewing your current set-up, it appears that the `apps` variable is an array. In order to access its items, you need to use the index and cannot directly access them using dot notation.

Since users can select multiple items, we should check for the `id` in the `apps` array based on the `appId` selected from the `items` array using checkboxes.

For demonstration purposes, I am assigning the `appId`s 10 and 20 directly to an array, and then fetching the corresponding results from the `apps` array using the Array#filter method along with the Array#includes method.

// Apps array
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'}
];

// Selected items array.
const selctedItems = [10, 20];

const result = apps.filter(({ id }) => selctedItems.includes(id));

// result
console.log(result);

Update : Detailed working demo as requested by the author (Comments have been added within the code snippet below).

// Input Array 1
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}
];

// Input Array 2
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'}
];

// Element where checkboxes will be bound. 
var myDiv = document.getElementById("checkBoxes");

// Dynamically create checkboxes for each object in "items" array and bind them to the "myDiv" element representing "checkBoxes".
for (var i = 0; i < items.length; i++) {
  var checkBox = document.createElement("input");
  var label = document.createElement("label");
  checkBox.type = "checkbox";
  checkBox.value = items[i].appId;
  myDiv.appendChild(checkBox);
  myDiv.appendChild(label);
  label.appendChild(document.createTextNode(items[i].name));
}

// Obtain all checkbox elements for iteration.
var cbs = document.querySelectorAll('input[type="checkbox"]');

// Store selected checkbox values in this variable.
let selectedItems = [];

// Iterate over each checkbox element and trigger an "onchange" event.
cbs.forEach(function(item) {
  item.onchange = getCheckBoxValue;
});

// Method to retrieve all selected checkbox values into an array.
function getCheckBoxValue() {
  selectedItems = [];
  cbs.forEach(function(item) {
    if (item.checked) {
      if (!selectedItems.includes(item.value)) {
        selectedItems.push(item.value)
      }
    }
  });
  getFilteredValuesFromAnotherArr();
}

// Final method used to fetch the selected values from another array based on the selections made.
function getFilteredValuesFromAnotherArr() {
  console.log(apps.filter(({ id }) => selectedItems.includes(id.toString())));
}

<div id="checkBoxes"></div>

Answer 3

Answer №2

To simplify your code and make it more readable, I suggest merging the two arrays together. By creating a dictionary for the app array using the reduce function, you can easily access app items corresponding to ids in the items array without having to loop through the entire array.

Once you have the dictionary set up, you can merge the arrays by mapping the items array and combining each item with its respective app item from the appDict.

This approach reduces complexity and maintains O(n) time complexity for solving the problem efficiently. Here's an example of how you can achieve this:

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]})

Answer 4

To simplify your code and make it more readable, I suggest merging the two arrays together. By creating a dictionary for the app array using the reduce function, you can easily access app items corresponding to ids in the items array without having to loop through the entire array.

Once you have the dictionary set up, you can merge the arrays by mapping the items array and combining each item with its respective app item from the appDict.

This approach reduces complexity and maintains O(n) time complexity for solving the problem efficiently. Here's an example of how you can achieve this:

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]})

Answer 5

Answer №3

To effectively manage multiple items, here's a straightforward illustration to consider. Let's say App ID 10 and 30 are chosen. You'll need to update the app array to include both the original data and the selected-item outcomes as shown below:

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));

Outcomes:

[{"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}]}]

Experience this example

Answer 6

To effectively manage multiple items, here's a straightforward illustration to consider. Let's say App ID 10 and 30 are chosen. You'll need to update the app array to include both the original data and the selected-item outcomes as shown below:

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));

Outcomes:

[{"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}]}]

Experience this example

Answer 7

Answer №4

[UPDATE]

This piece of code is tailored to meet your specific requirements:

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 apply the filter function on the items array, which iterates through each element in that array and evaluates whether the provided function returns true or false for that particular element. The elements that pass this evaluation are added to a new array, which is then returned.

The function we supply for this evaluation,

x => apps.findIndex(y => y.id === x.appId) >= 0

, utilizes another built-in utility function called findIndex, which operates similar to filter but only returns one item along with its position in the array. We pass in the function y => y.id === x.appId to check if the current item in the apps array matches the one we're looking for. If no match is found, it returns -1, which we use as our comparison condition.

I trust this explanation clarifies things for you~!!

Answer 8

[UPDATE]

This piece of code is tailored to meet your specific requirements:

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 apply the filter function on the items array, which iterates through each element in that array and evaluates whether the provided function returns true or false for that particular element. The elements that pass this evaluation are added to a new array, which is then returned.

The function we supply for this evaluation,

x => apps.findIndex(y => y.id === x.appId) >= 0

, utilizes another built-in utility function called findIndex, which operates similar to filter but only returns one item along with its position in the array. We pass in the function y => y.id === x.appId to check if the current item in the apps array matches the one we're looking for. If no match is found, it returns -1, which we use as our comparison condition.

I trust this explanation clarifies things for you~!!

Answer 9

Answer №5

The approach of using .filter(...includes...).map(...) involves nested linear operations, leading to a quadratic time complexity. Similarly, utilizing .filter(...findIndex...) presents the same issue.

Below is a concise example showcasing an optimized solution incorporating:

The efficient utilization of Set for swift O(1) lookups
Integration of useMemo to prevent unnecessary computations
Utilization of flatMap for merging filter->map in a single iteration

function Application({ objects, applications }) {
  const [chosenItems, setChosenItems] = React.useState(_ => new Set())
  const selectedApps = React.useMemo(
    () => new Set(Array.from(chosenItems, s => s.appId)),
    [chosenItems]
  )
  const selectItem = object => event => {
    const chosen = new Set(chosenItems)
    if (chosen.has(object)) chosen.delete(object)
    else chosen.add(object)
    setChosenItems(chosen)
  }
  return <div>
    {objects.map((object, key) =>
      <div>
        <input
          key={key}
          type="checkbox"
          checked={chosenItems.has(object)}
          onClick={selectItem(object)}
        />
        {object.name}
      </div>
    )}
    {applications.flatMap((app, key) =>
      selectedApps.has(app.id)
        ? [<pre key={key}>{JSON.stringify(app)}</pre>]
        : []
    )}
  </div>
}

const objects = [{id:1, name:'Object 1', appId:10},{id:2, name:'Object 2', appId:20},{id:3, name:'Object 3', appId:20},{id:4, name:'Object 4', appId:30}]
const applications = [{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(<Application objects={objects} applications={applications} />, 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>

Answer 10

The approach of using .filter(...includes...).map(...) involves nested linear operations, leading to a quadratic time complexity. Similarly, utilizing .filter(...findIndex...) presents the same issue.

Below is a concise example showcasing an optimized solution incorporating:

The efficient utilization of Set for swift O(1) lookups
Integration of useMemo to prevent unnecessary computations
Utilization of flatMap for merging filter->map in a single iteration

function Application({ objects, applications }) {
  const [chosenItems, setChosenItems] = React.useState(_ => new Set())
  const selectedApps = React.useMemo(
    () => new Set(Array.from(chosenItems, s => s.appId)),
    [chosenItems]
  )
  const selectItem = object => event => {
    const chosen = new Set(chosenItems)
    if (chosen.has(object)) chosen.delete(object)
    else chosen.add(object)
    setChosenItems(chosen)
  }
  return <div>
    {objects.map((object, key) =>
      <div>
        <input
          key={key}
          type="checkbox"
          checked={chosenItems.has(object)}
          onClick={selectItem(object)}
        />
        {object.name}
      </div>
    )}
    {applications.flatMap((app, key) =>
      selectedApps.has(app.id)
        ? [<pre key={key}>{JSON.stringify(app)}</pre>]
        : []
    )}
  </div>
}

const objects = [{id:1, name:'Object 1', appId:10},{id:2, name:'Object 2', appId:20},{id:3, name:'Object 3', appId:20},{id:4, name:'Object 4', appId:30}]
const applications = [{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(<Application objects={objects} applications={applications} />, 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>

Steps for filtering multiple arrays simultaneously

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

The JSONP script encountered an error due to an unexpected colon

Populating JQuery autocomplete using a PHP array

Encountering a "Multiple registrations of the method 'get' on the path '../api/' error" with Swagger

What are some ways to dynamically find and import JavaScript files while the code is running?

The range input in HTML does not respond when attempting to adjust it

Displaying an alert message when incorrect login credentials are detected in React Native

Accordion's second child element experiencing issues with grid properties

Can JSON be parsed using JavaScript?

Switching between different months in the React-Calendar display

AngularJS - Finding the position of an element with the query "is located at the bottom of the page"

What are some ways to display alternative content when JavaScript is not enabled?

Trouble with @Input() in Angular 2 when selector is surrounded by HTML tag

Jquery double-click Event Not Functioning Properly

The datatable does not adjust to changes in page size

What is the best way to move the ball within a ruler chart that spans from -100 to 100 while staying within the confines of the canvas?

How should the client object be properly initialized? Error: VoximplantApiClient cannot be used as a constructor

Issue with React application failing to transmit files to PHP server using Ajax

The calculator is malfunctioning and unable to perform calculations

Encountered a Uncaught TypeError: Attempted to clear a canvas when the property 'getContext' is undefined or null

When it comes to JavaScript, the evaluation order of arguments and delayed evaluation play a crucial