JavaScript - Employing the .every function with an array containing objects

Question

JavaScript - Employing the .every function with an array containing objects

Is it possible to use the array.every method on multidimensional arrays?

The structure of my array is as follows:

tabs=[
{label: string, icon: icon, routerLink: link},
{label: string, icon: icon, routerLink: link},
{label: string, icon: icon, routerLink: link}]

I am trying to determine if every LABEL within tabs is different from a specific label. I would appreciate a detailed explanation since I am new to programming and keen on understanding the process! But any answer is welcome. :) Thank you in advance!

EDIT: I am using the following method to add Tabs to my Tabmenu(ng2, primeng):

addTab(id: string) {
  if (id === 'linechart') {
    this.tab = {
      label: 'NW-Details',
      icon: 'fa-area-chart',
      routerLink: ['/nwdetails']
    }
    TABS.push(this.tab);
  }
  if (id === 'piechart') {
    this.tab = {
      label: 'IO-Details',
      icon: 'fa-pencil',
      routerLink: ['/iodetails']
    }
    TABS.push(this.tab)
  }
}

Whereas TABS is typeof MenuItem[] provided by primeng, tab is any.

Whenever I double-click on a chart, this function is called and a new tab is added to my menu. Now I want to check if a tab with a certain label is already open to prevent opening it again. I have tried using for loops combined with if statements

for (i = 0; i < TABS.length; i++) {
  if (TABS[i].label !== 'NW-Details') {
    this.tab = {
      label: 'NW - Details',
      icon: 'fa - area - chart'
      TABS.push(this.tab)
    }
  }

However, this results in opening a new tab each time it is not equal, causing multiple tabs to be opened upon double-clicking when there are existing tabs.

javascript arrays typescript

Answer 1

Answer №1

If you're looking for a solution, consider utilizing the Array#every method.

tabls.every(function(item){
  return item.label !== targetValue
})

To learn more about the behavior of Array#every, refer to the official MDN documentation:

The every method applies the provided callback function to each element within the array until it encounters one where the callback returns a falsy value (a value that is false when converted to Boolean). If such an element is found, the method will promptly return false. Conversely, if the callback returns a true value for all elements, the method will return true. Callback is only triggered for array indexes with assigned values and will not apply to deleted or unassigned indexes.
Alternatively, you can also consider using the Array#some method

!tabls.some(function(item){
  return item.label === targetValue
})

For more insights on the functionality of Array#some, you can consult the MDN documentation here:

The some() method will execute the callback function for each element in the array until it discovers an element where the callback returns a truthy value (a value that is true when converted to Boolean). Upon finding such an element, the method will immediately return true. If not, it will return false. Callback is invoked only for array indexes with assigned values and will not apply to deleted or unassigned indexes.

Answer 2

If you're looking for a solution, consider utilizing the Array#every method.

tabls.every(function(item){
  return item.label !== targetValue
})

To learn more about the behavior of Array#every, refer to the official MDN documentation:

The every method applies the provided callback function to each element within the array until it encounters one where the callback returns a falsy value (a value that is false when converted to Boolean). If such an element is found, the method will promptly return false. Conversely, if the callback returns a true value for all elements, the method will return true. Callback is only triggered for array indexes with assigned values and will not apply to deleted or unassigned indexes.
Alternatively, you can also consider using the Array#some method

!tabls.some(function(item){
  return item.label === targetValue
})

For more insights on the functionality of Array#some, you can consult the MDN documentation here:

The some() method will execute the callback function for each element in the array until it discovers an element where the callback returns a truthy value (a value that is true when converted to Boolean). Upon finding such an element, the method will immediately return true. If not, it will return false. Callback is invoked only for array indexes with assigned values and will not apply to deleted or unassigned indexes.

Answer 3

Answer №2

Array functions have a signature that typically looks like this:

Array.prototype.functionName = function(callback){
  for (var i = 0; i< this.length; i++){
    if(callback(this[i]))
      // do something.
    else
      // do something.
  }
}

A callback function is expected to return a boolean value, either true or false.

every vs some

While both every and some can be used in a similar way, it is important to use them in a way that accurately conveys the intended meaning.

var d = [1,2,3,4,5];
var valid = d.every(function(num){ return !isNaN(num); });
console.log(valid)

The above code signifies "valid if all elements are numbers". Using .some instead would change the meaning to "invalid if anyone is not a number". Choose the method based on the context of the code to enhance readability.

References

Answer 4

Array functions have a signature that typically looks like this:

Array.prototype.functionName = function(callback){
  for (var i = 0; i< this.length; i++){
    if(callback(this[i]))
      // do something.
    else
      // do something.
  }
}

A callback function is expected to return a boolean value, either true or false.

every vs some

While both every and some can be used in a similar way, it is important to use them in a way that accurately conveys the intended meaning.

var d = [1,2,3,4,5];
var valid = d.every(function(num){ return !isNaN(num); });
console.log(valid)

The above code signifies "valid if all elements are numbers". Using .some instead would change the meaning to "invalid if anyone is not a number". Choose the method based on the context of the code to enhance readability.

JavaScript - Employing the .every function with an array containing objects

Answer №1

Answer №2

every vs some

References

Similar questions

Creating a dynamic onclick function that depends on a variable passed from a while loop in PHP

Design a custom Bootstrap dropdown using an input[type="text"] element

Remove console.log and alert statements from minified files using uglifyjs-folder

Submitting form by double clicking and pressing enter at the same time

The appearance of HTML varies depending on the type of mobile device being used

Develop a scrambled PHP webpage for a CAPTCHA system

Manipulating DropDownList Attributes in ASP.NET using JavaScript

What are the consequences of relying too heavily on deep type inference in React and Typescript?

Utilizing jQuery UI autocomplete with AJAX and JSON data sources

Tips for setting an argument with a promise data type

Looking to organize an array of objects containing two string elements (countries) based on the country name using TypeScript or the Lodash library?

Stop the observable interval in Angular when the route changes

Send the ID of the checkbox to a PHP file using AJAX

Limit access to route in ExpressJS only to internal redirects

Ways to combine values from various arrays

I'm wondering why my socket.io emit isn't triggering a content update

The Ajax request fails to send the form files

How to selectively make properties optional in Typescript conditions

Router-view failing to display component

Designing functions with HTML