Tips for leveraging _.union function from lodash to eliminate duplicate elements from several arrays in a TypeScript project

Question

Tips for leveraging _.union function from lodash to eliminate duplicate elements from several arrays in a TypeScript project

I attempted to use import _ from 'lodash-es' and

_.union(user.users.map(user => user.city))

. However, the result was not as expected, such as:

["city_id1", "city_id2", "city_id3", "city_id4"]

What is the correct way to utilize _.union, or is there a better method to flatten all arrays and create a unique array?

### data
const user =
{
  "users": [
    {
      "id": "user_id1",
      "city": ["city_id1", "city_id2"]
    },
    {
      "id": "user_id2",
      "city": ["city_id3", "city_id4"]
    },
    {
      "id": "user_id3",
      "city": ["city_id1", "city_id3"]
    },
    {
      "id": "user_id4",
      "city": ["city_id2", "city_id4"]
    }
   ]
}

javascript angular typescript lodash

Answer 1

Answer №1

If you want to achieve the desired outcome, you can leverage the power of Set along with flatMap.

Here's a concise one-liner solution:

const result = [...new Set(user.users.flatMap((o) => o.city))];
console.log(result);

const user = {
  users: [{
      id: "user_id1",
      city: ["city_id1", "city_id2"],
    },
    {
      id: "user_id2",
      city: ["city_id3", "city_id4"],
    },
    {
      id: "user_id3",
      city: ["city_id1", "city_id3"],
    },
    {
      id: "user_id4",
      city: ["city_id2", "city_id4"],
    },
  ],
};

const set = new Set(user.users.flatMap((o) => o.city));
const arr = [...set];
console.log(arr);

Answer 2

If you want to achieve the desired outcome, you can leverage the power of Set along with flatMap.

Here's a concise one-liner solution:

const result = [...new Set(user.users.flatMap((o) => o.city))];
console.log(result);

const user = {
  users: [{
      id: "user_id1",
      city: ["city_id1", "city_id2"],
    },
    {
      id: "user_id2",
      city: ["city_id3", "city_id4"],
    },
    {
      id: "user_id3",
      city: ["city_id1", "city_id3"],
    },
    {
      id: "user_id4",
      city: ["city_id2", "city_id4"],
    },
  ],
};

const set = new Set(user.users.flatMap((o) => o.city));
const arr = [...set];
console.log(arr);

Answer 3

Answer №2

if you're still interested in utilizing lodash

then here's the solution


const person =
{
  "people": [
    {
      "id": "person_id1",
      "location": ["location_id1", "location_id2"]
    },
    {
      "id": "person_id2",
      "location": ["location_id3", "location_id4"]
    },
    {
      "id": "person_id3",
      "location": ["location_id1", "location_id3"]
    },
    {
      "id": "person_id4",
      "location": ["location_id2", "location_id4"]
    }
   ]
}

let b = person.people.map(entry=>entry.location)
_.union(...b)

Answer 4

if you're still interested in utilizing lodash

then here's the solution


const person =
{
  "people": [
    {
      "id": "person_id1",
      "location": ["location_id1", "location_id2"]
    },
    {
      "id": "person_id2",
      "location": ["location_id3", "location_id4"]
    },
    {
      "id": "person_id3",
      "location": ["location_id1", "location_id3"]
    },
    {
      "id": "person_id4",
      "location": ["location_id2", "location_id4"]
    }
   ]
}

let b = person.people.map(entry=>entry.location)
_.union(...b)

Answer 5

Answer №3

Loop through the users array and populate a new array unique_cities with the outcome of using _.union

var user_data =
{
  "users": [
    {
      "id": "user_id1",
      "city": ["city_id1", "city_id2"]
    },
    {
      "id": "user_id2",
      "city": ["city_id3", "city_id4"]
    },
    {
      "id": "user_id3",
      "city": ["city_id1", "city_id3"]
    },
    {
      "id": "user_id4",
      "city": ["city_id2", "city_id4"]
    }
   ]
};

var unique_cities = [];
user_data.users.forEach(user => {
  unique_cities = _.union(user.city, unique_cities);
});

console.log(JSON.stringify(unique_cities.sort()));

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83efece7e2f0ebc3b7adb2b4adb1b2">[email protected]</a>/lodash.min.js"></script>

Answer 6

Loop through the users array and populate a new array unique_cities with the outcome of using _.union

var user_data =
{
  "users": [
    {
      "id": "user_id1",
      "city": ["city_id1", "city_id2"]
    },
    {
      "id": "user_id2",
      "city": ["city_id3", "city_id4"]
    },
    {
      "id": "user_id3",
      "city": ["city_id1", "city_id3"]
    },
    {
      "id": "user_id4",
      "city": ["city_id2", "city_id4"]
    }
   ]
};

var unique_cities = [];
user_data.users.forEach(user => {
  unique_cities = _.union(user.city, unique_cities);
});

console.log(JSON.stringify(unique_cities.sort()));

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83efece7e2f0ebc3b7adb2b4adb1b2">[email protected]</a>/lodash.min.js"></script>

Tips for leveraging _.union function from lodash to eliminate duplicate elements from several arrays in a TypeScript project

Answer №1

Answer №2

Answer №3

Similar questions

Parent Component in Angular 2 Fails to Refresh Upon Observable Update

Having trouble populating Extjs Grid with JSON data

Utilizing async/await as a module function: A comprehensive guide

Using an array of strings as a key in React with TypeScript to access values from state

The Role of Filling in a Process

Tips for using a JavaScript function to navigate to a specific division (<div>) on an HTML page

The concept of localStorage is not recognized in the next.js framework

The search for Javascript is futile when utilizing .Net RijndaelManaged

What is the best approach to create a regex pattern that will identify variables enclosed in brackets across single and multiple lines?

Testing the local transmission of form data via Javascript: A Step-by-Step guide

Ember application experiencing trouble displaying Facebook Like Box

Display information based on the radio button chosen

When attempting to reload a single page application that utilizes AJAX, a 404 error is encountered

Getting data from a URL using Node.js and Express: A beginner's guide

What is the best method to retrieve a nested JSON property that is deeply embedded within

Warning triggered Grunt cancellation

Displaying a div in Vue.js when a button is clicked and an array is filled with

Ways To Obtain Trustworthy Dates Using JavaScript

Challenges of aligning a modal overlay in the middle of mobile screens

What is the best way to transfer a variable between components in Angular without using the HTML page, directly within the components themselves?