Looping through a JavaScript array, eliminating duplicates based on a specific value, and then adding the unique value along with another value to a new array

Question

Looping through a JavaScript array, eliminating duplicates based on a specific value, and then adding the unique value along with another value to a new array

When receiving an array of objects through an API call in my Vuejs front-end application, I faced the task of looping through the data to eliminate duplicates and create a new array containing unique "phases" along with their respective "id's". The original array contained unnecessary key-value pairs, so I needed to filter them out. Additionally, I wanted the phases to be sorted in ascending order based on their phase numbers. Below is the code I used:

salesPhases () {
  let phases = this.$store.state.addresses.salesPhases
  let uniquePhases = []
  for (let i = 0; i < phases.length; i++) {
    if (uniquePhases.indexOf(phases[i].phase_number) === -1) {
      uniquePhases.push(phases[i].phase_number)
    }
  }
  return uniquePhases.sort((a, b) => {
    return a - b
  })
}

The code snippet above successfully achieved what I needed, except for including the id along with the phases. My attempt to include it resulted in losing the uniqueness condition as follows:

uniquePhases.push([phases[i].phase_number, phases[i].id])

Even though the sorting function continues to work, it now sorts a single-dimensional array that combines both phases and ids. An example snippet of the phases array structure is shown below:

{ "data": [
    {
        "id": "94e224af-135f-af31-3619-535acfae9930",
        "street_address1": "407 48TH ST E",
        "street_address2": null,
        "phase": "101",
        "sales_rep": "164",
        "id": "abd90d6b-28a8-2be6-d6c1-abd9007aef38",
        "name": "48TH ST E",
        "block_minimum": 400,
        "block_maximum": 498,
        "side": 2
    },
    {
        "id": "94e224af-135f-af31-3619-535acfae9930",
        "street_address1": "407 48TH ST E",
        "street_address2": null,
        "phase": "101",
        "sales_rep": "164",
        "id": "abd90d6b-28a8-2be6-d6c1-abd9007aef38",
        "name": "48TH ST E",
        "block_minimum": 401,
        "block_maximum": 499,
        "side": 1
    }
]

javascript arrays vue.js duplicates indexof

Answer 1

Answer №1

To extract only unique items from an array, you can utilize the filter method with a Set. Then, transform the filtered items into new objects containing just the id and phase_number, followed by arranging them based on the phase_number:

salesPhases () {
  const uSet = new Set()
  return this.$store.state.addresses.salesPhases
    .filter(({ phase_number }) => uSet.has(phase_number) ? false : uSet.add(phase_number)) // filter out duplicates by phase_number
    .map(({ id, phase_number }) => ({ id, phase_number })) // create an object with id and phase_number
    .sort((a, b) => a.phase_number - b.phase_number) // sort by phase_number
}

An alternative approach is to use the reduce method in conjunction with Map, then convert the resulting values of the Map into an array using the spread operator

salesPhases () {
  return [...this.$store.state.addresses.salesPhases
    .reduce((m, { id, phase_number }) => 
      m.has(phase_number) ? m : m.set(phase_number, { id, phase_number }), new Map()) // convert to map, prioritize unique phase_number keys
    .values()] // change Map values to an array
    .sort((a, b) => a.phase_number - b.phase_number) // sort by phase_number
}

Answer 2

To extract only unique items from an array, you can utilize the filter method with a Set. Then, transform the filtered items into new objects containing just the id and phase_number, followed by arranging them based on the phase_number:

salesPhases () {
  const uSet = new Set()
  return this.$store.state.addresses.salesPhases
    .filter(({ phase_number }) => uSet.has(phase_number) ? false : uSet.add(phase_number)) // filter out duplicates by phase_number
    .map(({ id, phase_number }) => ({ id, phase_number })) // create an object with id and phase_number
    .sort((a, b) => a.phase_number - b.phase_number) // sort by phase_number
}

An alternative approach is to use the reduce method in conjunction with Map, then convert the resulting values of the Map into an array using the spread operator

salesPhases () {
  return [...this.$store.state.addresses.salesPhases
    .reduce((m, { id, phase_number }) => 
      m.has(phase_number) ? m : m.set(phase_number, { id, phase_number }), new Map()) // convert to map, prioritize unique phase_number keys
    .values()] // change Map values to an array
    .sort((a, b) => a.phase_number - b.phase_number) // sort by phase_number
}

Answer 3

Answer №2

To enhance your code functionality, consider updating it to push the complete phase object instead of just the phase number. Utilize the Array's find method in place of indexOf to verify if a phase with the specified number exists.

Give this approach a try:

updateSalesPhases () {
  let phases = this.$store.state.addresses.salesPhases
  let uniquePhases = []
  for (let i = 0; i < phases.length; i++) {
    if (!uniquePhases.find(x => x.phase_number === phases[i].phase_number)) {
      uniquePhases.push(phases[i])
    }
  }
  return uniquePhases.sort((a, b) => {
    return a.phase_number - b.phase_number
  })
}

Answer 4

To enhance your code functionality, consider updating it to push the complete phase object instead of just the phase number. Utilize the Array's find method in place of indexOf to verify if a phase with the specified number exists.

Give this approach a try:

updateSalesPhases () {
  let phases = this.$store.state.addresses.salesPhases
  let uniquePhases = []
  for (let i = 0; i < phases.length; i++) {
    if (!uniquePhases.find(x => x.phase_number === phases[i].phase_number)) {
      uniquePhases.push(phases[i])
    }
  }
  return uniquePhases.sort((a, b) => {
    return a.phase_number - b.phase_number
  })
}

Answer 5

Answer №3

To handle this scenario, I recommend utilizing the powerful tool lodash: https://lodash.com/docs#sortedUniqBy

fetchUniqueSalesPhases () {
  return _.sortedUniqBy(this.$store.state.addresses.salesPhases, 
    phase => phase.phase_number)
}

Answer 6

To handle this scenario, I recommend utilizing the powerful tool lodash: https://lodash.com/docs#sortedUniqBy

fetchUniqueSalesPhases () {
  return _.sortedUniqBy(this.$store.state.addresses.salesPhases, 
    phase => phase.phase_number)
}

Looping through a JavaScript array, eliminating duplicates based on a specific value, and then adding the unique value along with another value to a new array

Answer №1

Answer №2

Answer №3

Similar questions

Search for and swap out every item in a multi-tiered array

What is the best way to generate a fresh JSON object within a react hook function?

In Vue3, a certain variable can be set either through props or using ref

What is the process for selecting the default option in a drop-down menu?

Steps to include a fresh string into an array within a json document

Display or conceal several elements using JQUERY/HTML upon hovering

Defining TypeScript type annotations: the art of declaring class constructors

Problems arise when using AngularJS' .run function after navigating to a different page

Retrieving the parent value in React-select grouped options

The resolution of Q.all does not occur in the expected order

Retrieve the user_id without triggering any route

What methods can I use to ensure precision in my raycasting while maneuvering the mouse over various sections of a LineSegment?

Implementing a file download feature in Python when clicking on a hyperlink

Is it possible to customize the color of the modal backdrop in layer v4 of the Material-UI library

Enhancing button functionality using jQuery and JavaScript for toggling behavior

Error encountered: Unexpected token '<' when using PHP and Jquery AJAX post

The Iframe contains its own scroll feature within the body

Using VueJS: How can I reference a variable by its string name instead of directly in a template?

Adding byte arrays together in a repetitive sequence using Go

Any ideas on how I can use PHP or JavaScript to repeatedly execute a segment of HTML code?