How to merge two different arrays of object in one single array Angular 8

Question

i am calling two api at same time and getting below response in array1 and array2.at Now i wanted to merge all the object in one array

Below is my array1 and array2 response.

Const Array1 = [
    {
        "lineLossId": 1,
        "dataSource": "DFOS",
        "category": "Dressings",
        "entryDetails": {
            "month": "September",
            "year": "2023"
        },                
        "HrDbMonth": null
    },
    {
        "lineLossId": 2,
        "dataSource": "DFOS",
        "entryDetails": {
            "month": "August",
            "year": "2023"
        },                
        "HrDbMonth": null
    }
];


const array2 = [
    {
        "lineLossId": 3,
        "dataSource": "DFOS",
        "category": "Dressings",
        "entryDetails": {
            "month": "August",
            "year": 2023
        },
        "uom": "OOOUnits"
        
    }
];

I am expecting all the response to be merge in one array with all objects and in sequential index key.

Below is my Expected output

Const array3 = [
    {
        "lineLossId": 1,
        "dataSource": "DFOS",
        "category": "Dressings",
        "entryDetails": {
            "month": "September",
            "year": "2023"
        },                
        "HrDbMonth": null
    },
    {
        "lineLossId": 2,
        "dataSource": "DFOS",
        "entryDetails": {
            "month": "August",
            "year": "2023"
        },                
        "HrDbMonth": null
    },
    {
        "lineLossId": 3,
        "dataSource": "DFOS",
        "category": "Dressings",
        "entryDetails": {
            "month": "August",
            "year": 2023
        },
        "uom": "OOOUnits"
        
    }
];

Merging two arrays is easy. What you tried and what problems have you faced? — N.F.
– N.F., Commented Sep 29, 2023 at 5:08
Does this answer your question? merge two object arrays with Angular 2 and TypeScript? — Yong Shun
– Yong Shun, Commented Sep 29, 2023 at 5:38

Patrick Cerny · Accepted Answer · 2023-09-29 06:16:12Z

2

To concat 2 arrays, you can use (as the name suggests) the .concat() function like this.

const foo = [1, 2];
const bar = [3];
const concatedArray = foo.concat(bar) //--> [1,2,3]

To sort the array afterwards, you can use the .sort() function.

const arrayOfObjects = [
  { id: 3, name: 'Alice' },
  { id: 1, name: 'Bob' },
  { id: 2, name: 'Charlie' },
];

// Sort the array by the 'id' property
arrayOfObjects.sort((a, b) => a.id - b.id);

console.log(arrayOfObjects);

// output
//[
//  { id: 1, name: 'Bob' },
//  { id: 2, name: 'Charlie' },
//  { id: 3, name: 'Alice' }
//]

I hope this answers your question.

answered Sep 29, 2023 at 6:16

Patrick Cerny

4746 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Eliseo · Accepted Answer · 2023-09-29 06:17:32Z

0

If you need call to two (or more) diferents APIs and one is not depending another, you use forkJoin rxjs operator to have an unique subscription. after use map operator to return the join of the two response. You can also use sort method of the array to be sure the response get the array sorted:

getData()
{
  return forkJoin([
       this.httpClient.get(...),
       this.httpClient.get(...)]
     ).
     pipe.pipe(
        map(([res1, res2]: [any[], any[]]) =>
        res1.concat(res2)
            .sort((a: any, b: any) => a.lineLossId - b.lineLossId)
    )
  )
}

answered Sep 29, 2023 at 6:17

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Comments

bottletyre · Accepted Answer · 2023-09-29 08:26:04Z

0

With ES6 you can do it easily as below,

let mergedarray = [...array1, ...array2];

Output:

[{
  "lineLossId": 1,
  "dataSource": "DFOS",
  "category": "Dressings",
  "entryDetails": {
    "month": "September",
    "year": "2023"
  },
  "HrDbMonth": null
},
{
  "lineLossId": 2,
  "dataSource": "DFOS",
  "entryDetails": {
    "month": "August",
    "year": "2023"
  },
  "HrDbMonth": null
},
{
  "lineLossId": 3,
  "dataSource": "DFOS",
  "category": "Dressings",
  "entryDetails": {
    "month": "August",
    "year": 2023
  },
  "uom": "OOOUnits"
}]

NOTE: It is nothing related to Angular.

answered Sep 29, 2023 at 8:26

bottletyre

894 bronze badges

Collectives™ on Stack Overflow

How to merge two different arrays of object in one single array Angular 8

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related