Get items from an array that have a property matching another array

Question

Get items from an array that have a property matching another array

Is there a more efficient way to create a new array with contact objects that have values matching those in selectedContact?

selectedContact: number[] = [0,2] //value
contacts: Contact[] = [{ 
  firstName:"Dan";
  lastName:"Chong";
  email:"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e682878885a68b878f8ac885898b">[email protected]</a>";
  value:0;
},
{ 
  firstName:"Mark";
  lastName:"Wong";
  email:"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="157874677e625578747c793b767a78">[email protected]</a>";
  value:1;
},
{ 
  firstName:"Layla";
  lastName:"Sng";
  email:"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4e222f37222f0e232f2722602d2123">[email protected]</a>";
  value: 2;
}]

Desired output:

newArray = [{ 
 firstName:"Dan";
 lastName:"Chong";
 email:"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2440454a476449454d480a474b49">[email protected]</a>";
 value:0;
},{ 
 firstName:"Layla";
 lastName:"Sng";
 email："<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7a161b03161b3a171b131654191517">[email protected]</a>";
 value：2;
}];

Current approach:

const newArray: Contact[] = [];
this.selectedContact.forEach(index => {
  newArray.push(this.contacts.find(c => c.value === index));
});

javascript arrays typescript object angular6

Answer 1

Answer №1

When it comes to efficiency, it is more advantageous to iterate through the selectedContacts instead of the contacts. This is because contacts are indexed as an array and you are accessing them by index.

Let's assume the length of contacts is N and the length of selectedContacts is M.

Since selectedContacts is a subset of contacts, we can infer that M <= N. For larger databases of contacts, this disparity can have a significant impact.

The provided code:

this.selectedContact.forEach(index => {
  newArray.push(this.contacts.find(c => c.value === index));
});

Runs in O(M*N) complexity since it loops through selectedContact (O(M)) and each time has to search for a value in contacts (O(N)).

The suggested solution traverses contacts (O(N)) and checks for a value in selectedContact which is O(M). Thus, the algorithm is essentially O(N*M).

In your scenario, you already possess a straightforward method of finding contacts by number due to the indexed nature of contacts.

This enables you to utilize code like this:

return this.selectedContact.map(index => this.contacts[index]);

As retrieving an array element by index operates in O(1) time complexity, this approach is most efficient with a O(M) scale.

If you cannot rely on array indexing, alternative data structures such as a Map where the id serves as the key and contact as the value can offer similar swift look-up speeds (approximately O(1)).

Answer 2

When it comes to efficiency, it is more advantageous to iterate through the selectedContacts instead of the contacts. This is because contacts are indexed as an array and you are accessing them by index.

Let's assume the length of contacts is N and the length of selectedContacts is M.

Since selectedContacts is a subset of contacts, we can infer that M <= N. For larger databases of contacts, this disparity can have a significant impact.

The provided code:

this.selectedContact.forEach(index => {
  newArray.push(this.contacts.find(c => c.value === index));
});

Runs in O(M*N) complexity since it loops through selectedContact (O(M)) and each time has to search for a value in contacts (O(N)).

The suggested solution traverses contacts (O(N)) and checks for a value in selectedContact which is O(M). Thus, the algorithm is essentially O(N*M).

In your scenario, you already possess a straightforward method of finding contacts by number due to the indexed nature of contacts.

This enables you to utilize code like this:

return this.selectedContact.map(index => this.contacts[index]);

As retrieving an array element by index operates in O(1) time complexity, this approach is most efficient with a O(M) scale.

If you cannot rely on array indexing, alternative data structures such as a Map where the id serves as the key and contact as the value can offer similar swift look-up speeds (approximately O(1)).

Answer 3

Answer №2

You should consider utilizing the Array.prototype.filter() method for your solution.

When used, the filter() function generates a new array containing elements that meet the criteria set by the provided function.

Another useful method is Array.prototype.includes()

The includes() function helps determine whether a particular element is present in an array, returning either true or false accordingly.

To see it in action, here's a snippet of code:

var selectedContact = [0,2];
var contacts = [{ 
  firstName: "Dan",
  lastName: "Chong",
  email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3d595c535e7d505c5451135e5250">[email protected]</a>",
  value: 0
},
{ 
  firstName: "Mark",
  lastName: "Wong",
  email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0c616d7e677b4c616d6560226f6361">[email protected]</a>",
  value: 1
},
{ 
  firstName: "Layla",
  lastName: "Sng",
  email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d6bab7afbab796bbb7bfbaf8b5b9bb">[email protected]</a>",
  value: 2
}]
let newArray =  contacts.filter(c => selectedContact.includes(c.value));

console.log(newArray);

Answer 4

You should consider utilizing the Array.prototype.filter() method for your solution.

When used, the filter() function generates a new array containing elements that meet the criteria set by the provided function.

Another useful method is Array.prototype.includes()

The includes() function helps determine whether a particular element is present in an array, returning either true or false accordingly.

To see it in action, here's a snippet of code:

var selectedContact = [0,2];
var contacts = [{ 
  firstName: "Dan",
  lastName: "Chong",
  email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3d595c535e7d505c5451135e5250">[email protected]</a>",
  value: 0
},
{ 
  firstName: "Mark",
  lastName: "Wong",
  email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0c616d7e677b4c616d6560226f6361">[email protected]</a>",
  value: 1
},
{ 
  firstName: "Layla",
  lastName: "Sng",
  email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d6bab7afbab796bbb7bfbaf8b5b9bb">[email protected]</a>",
  value: 2
}]
let newArray =  contacts.filter(c => selectedContact.includes(c.value));

console.log(newArray);

Get items from an array that have a property matching another array

Answer №1

Answer №2

Similar questions

Add to Firebase reference using AngularFire

What could be causing the lack of updates in my SolidJS component when the data changes?

Utilize webpack to import functions from separate files

What is the best way to update an object with a new object using JavaScript or lodash?

What is the best way to dynamically generate and update the content of a select input in an Angular form using reactive programming techniques?

Accessing multi-dimensional array properties in PHP with JavaScript integration

Troubleshooting a JavaScript Error on an ASP.NET MasterPage

Tips for enhancing contrast in MUI dark theme modals

What are the reasons for the inability to send form-data in Postman?

Tips for adjusting the duration of a background in jQuery

Integrating a fictitious style using jQuery

Tips for inserting a DIV and SCRIPT from a single HTML template into a webpage

While Advanced REST Client successfully retrieves an infinite JSON file from the AngularJS REST service, Postman encounters an error with the code ERR_INCOMPLETE_CHUNKED_ENCODING

Finding strikeout text within <s> or <del> tags can be identified by closely examining the HTML codes

Displaying items from an array is made easy thanks to the combination of mapGetters, VUEJS, vuex, and vuetify

What are the reasons for the slower runtime of node.js compared to the Google Chrome console

Calculating the average from a multi-dimensional array requires summing all the elements and

"Encountered a Chrome RangeError: The call stack size limit was exceeded while utilizing jQuery's $

MongoDB has incorrect date and time records

How can we effectively map Typescript Enums using their keys without relying on a Map?