the process of combining arrays within an array in Angular

Question

the process of combining arrays within an array in Angular

Is there a way to combine arrays of arrays in Angular?

const b: any = [];
b.push(
  [
    { date: "2019-12-20 08:08:00" },
    { date: "2019-12-20 08:08:00" },
    { date: "2019-12-21 08:08:00" }
  ],
  [{ date: "2019-12-20 08:08:00" }, { date: "2019-10-20 08:08:00" }],
  [{ date: "2019-12-20 08:08:00" }, { date: "2019-12-30 08:08:00" }]
);
uniq(flatten(b, true), true, item => item.date); //error here

Error: Expected 1 argument, but received 3.

Also, how can duplicates be removed using Lodash uniqBy function?

Expected result:

[
    "2019-12-21 08:08:00",
    "2019-12-20 08:08:00",
    "2019-12-30 08:08:00"
]

angular typescript

Answer 1

Answer №1

If you're looking to achieve this, you can utilize the Underscore - uniq function along with the flatten function.

const arr: any = []; arr.push(   [
    { date: "2019-12-20 08:08:00" },
    { date: "2019-12-20 08:08:00" },
    { date: "2019-12-21 08:08:00" }   
   ],
   [
    { date: "2019-12-20 08:08:00" },
    { date: "2019-10-20 08:08:00" }
   ],
   [
    { date: "2019-12-20 08:08:00" }, 
    { date: "2019-12-30 08:08:00" }
   ] );
_.uniq(_.flatten(arr, true), true, item => item.date)

Here is the resulting array:

[{date:"2019-12-20 08:08:00"},
{date:"2019-12-21 08:08:00"},
{date:"2019-10-20 08:08:00"},
{date:"2019-12-30 08:08:00"}]

If you prefer using lodash, you can achieve the same result with the following code:

_.uniqBy(_.flatten(arr, item => item.date), 'date')

Answer 2

If you're looking to achieve this, you can utilize the Underscore - uniq function along with the flatten function.

const arr: any = []; arr.push(   [
    { date: "2019-12-20 08:08:00" },
    { date: "2019-12-20 08:08:00" },
    { date: "2019-12-21 08:08:00" }   
   ],
   [
    { date: "2019-12-20 08:08:00" },
    { date: "2019-10-20 08:08:00" }
   ],
   [
    { date: "2019-12-20 08:08:00" }, 
    { date: "2019-12-30 08:08:00" }
   ] );
_.uniq(_.flatten(arr, true), true, item => item.date)

Here is the resulting array:

[{date:"2019-12-20 08:08:00"},
{date:"2019-12-21 08:08:00"},
{date:"2019-10-20 08:08:00"},
{date:"2019-12-30 08:08:00"}]

If you prefer using lodash, you can achieve the same result with the following code:

_.uniqBy(_.flatten(arr, item => item.date), 'date')

Answer 3

Answer №2

If we want to work with vanilla JavaScript, the necessary components are:

Map for obtaining unique items from an array
flatMap method for flattening an array
Array.from to create an array from a Map collection

The code implementation would look like this:

const result = new Map(b.flatMap(s => s).map(a => [a.date]));
let uniques = Array.from(result.keys());

Here's an example:

const b = [];
b.push(
  [
    { date: "2019-12-20 08:08:00" },
    { date: "2019-12-20 08:08:00" },
    { date: "2019-12-21 08:08:00" }
  ],
  [
    { date: "2019-12-20 08:08:00" },
    { date: "2019-10-20 08:08:00" }
  ],
  [{ date: "2019-12-20 08:08:00" },
  { date: "2019-12-30 08:08:00" }]
);

const result = new Map(b.flatMap(s => s).map(a => [a.date]));
console.log(Array.from(result.keys()));

Answer 4

If we want to work with vanilla JavaScript, the necessary components are:

Map for obtaining unique items from an array
flatMap method for flattening an array
Array.from to create an array from a Map collection

The code implementation would look like this:

const result = new Map(b.flatMap(s => s).map(a => [a.date]));
let uniques = Array.from(result.keys());

Here's an example:

const b = [];
b.push(
  [
    { date: "2019-12-20 08:08:00" },
    { date: "2019-12-20 08:08:00" },
    { date: "2019-12-21 08:08:00" }
  ],
  [
    { date: "2019-12-20 08:08:00" },
    { date: "2019-10-20 08:08:00" }
  ],
  [{ date: "2019-12-20 08:08:00" },
  { date: "2019-12-30 08:08:00" }]
);

const result = new Map(b.flatMap(s => s).map(a => [a.date]));
console.log(Array.from(result.keys()));

the process of combining arrays within an array in Angular

Answer №1

Answer №2

Similar questions

Having trouble with injecting string HTML into the head section in NextJS?

Each time a click is made, an Uncaught TypeError occurs, indicating that it is unable to read properties from an undefined source (specifically

Determine the difference between dates using Angular 2's array filtering function

Encountering a problem with ResolverFactory injection while trying to inject a resolver

The Zoom-sdk functions properly on a local machine, but encounters issues when it is

Implement validation within the child component using Reactive Forms

The issue with collapsible elements not functioning properly in an Angular application involving CSS and JS

Explore all Intellisense choices for Typescript Props in VS Code effortlessly

Angular does not allow the transfer of property values from one to another

What is the method for inserting line breaks in Ionic2 toasts using HTML?

Encountering a Runtime Exception while setting up a Client Component in the latest version of Next JS (v13.3

Leverage tsconfig.json within the subfolders located in the app directory during Angular build or ng-build process

Testing NextJS App Router API routes with Jest: A comprehensive guide

Live server code does not update with changes made in Angular

Angular 5 routing is reporting that the queryParams list is currently empty

A guide on specifying the data type for functions that receive input from React Child components in TypeScript

Unleashing the Power of RxJS with OR Conditions

Employing angular-ui-bootstrap to display pop-up notifications

Deactivating attribute inheritance / configuring component settings with script setup and Typescript

Dealing with Cross-Origin Resource Sharing problem in serving static images on Dotnet Core 3.1