How to Utilize findIndex to Validate the Presence of Elements in an Array of Objects using TypeScript

Question

How to Utilize findIndex to Validate the Presence of Elements in an Array of Objects using TypeScript

I need assistance in checking which properties from an array are present in another array of objects and which ones are not.

My object structure is as follows:

var tempObj=[{id: '1', color: 'red, blue, green', age: 27},{id: '2', color: 'black, orange, yellow', age: 75}];
var tempColor = ['red', 'yellow', 'white'];

The tempColor array consists of three elements that I need to check against the tempObj. However, the color property values in tempObj are comma-separated, creating some confusion for me. Usually, for a single element check, I would do something like this

var eleExists= this.tempObj.findIndex(obj => obj.age === 27) >= 0;

However, when dealing with array elements and comma-separated values, I am unsure how to properly check them. I am seeking guidance or advice on how to approach this issue.

javascript typescript

Answer 1

Answer №1


  const newData = [
    {id: '3', color: 'purple, pink, brown', age: 45},
    {id: '4', color: 'gray, turquoise, magenta', age: 32},
  ]

  const newColors = ['purple', 'brown', 'turquoise']

  function findUnusedColors(newColors, newData) {
    return newColors.filter(color => !newData.some(obj => obj.color.split(', ').includes(color)))
  }

  console.log(findUnusedColors(newColors, newData))
  // output: ['magenta']

Answer 2


  const newData = [
    {id: '3', color: 'purple, pink, brown', age: 45},
    {id: '4', color: 'gray, turquoise, magenta', age: 32},
  ]

  const newColors = ['purple', 'brown', 'turquoise']

  function findUnusedColors(newColors, newData) {
    return newColors.filter(color => !newData.some(obj => obj.color.split(', ').includes(color)))
  }

  console.log(findUnusedColors(newColors, newData))
  // output: ['magenta']

How to Utilize findIndex to Validate the Presence of Elements in an Array of Objects using TypeScript

Answer №1

Similar questions

Displaying Child Component in Parent Component After Click Event on Another Child Component: How to Implement Angular Parent/Children Click Events

encasing a snippet of code within a customized hyperlink

Baconjs exclusively retrieves the final debounce value

Unable to locate any division element by using document.getElementById

Immediate update: Receiving a status of 400 "Bad request" when trying to make an HTTPPOST

A guide on successfully sending parameters to Angular routes

Is there a way to automatically fill number fields by clicking on radio buttons using a JavaScript function?

"Use jquerytools to create a dynamic play/pause button functionality for scrollable content

Angular interceptors in sequence

React DOM's offsetHeight prior to rendering

Angular's ng-model is unable to access the value of an object array

Refreshing an Angular datatable using promises - reload directive

Retrieving Data from Database Using Laravel and Ajax Post-Update

How can you utilize a computed property in a Vue component to select all the text within it?

Learn how to retrieve images from the web API at 'https://jsonplaceholder.typicode.com/photos' and showcase them on a webpage using Angular10

Using Jquery's getJson method, we can easily fetch and retrieve the appropriate JSON string by

jQuery - contrasting effects of the before() and after() functions

The image slide change feature ceases to function properly when incorporating two separate functions

Guide on creating event hooks within VUE 2.0 component connections

What is the best approach to structure a React project in which a component's rendering changes with each instance?