CODEWITHSUNDEEP
javascriptangulartypescript
user1881845
user1881845

Reputation: 371

Merge two array of objects by ID?

I have following arrays of objects

firstAry = [{
    "status": "Creating",
    "datacenter-id": "1test",
    "datacenter-name": "1name"
}, {
    "status": "Creating",
    "datacenter-id": "2test",
    "datacenter-name": "2name"
}, {
    "status": "Creating",
    "datacenter-id": "id1",
    "datacenter-name": "data6"
}, {
    "status": "Creating",
    "datacenter-id": "id2",
    "datacenter-name": "data7"
}]

secondAry = [
  {
    "status": "Creating",
    "cluster-id": "1test",
    "cluster-name": "clu1",
    "datacenter-id": "null"
  },
  {
    "status": "Creating",
    "cluster-id": "1test1",
    "cluster-name": "clu1",
    "datacenter-id": "id1"
  },
  {
    "status": "Creating",
    "cluster-id": "1test113",
    "cluster-name": "clu11",
    "datacenter-id": "id1"
  },
  {
    "status": "Creating",
    "cluster-id": "2test2",
    "cluster-name": "clu2",
    "datacenter-id": "id2"
  },
  {
    "status": "Creating",
    "cluster-id": "2test22",
    "cluster-name": "clu22",
    "datacenter-id": "id2"
  }
]

I want to display 3 fields in the table - status, cluster-name, and datacenter-name in the table. The problem is I'm getting status, cluster-name in secondAry but the datacenter-name is getting in the firstAry. So I want to merge these two arrays on the basis of datacenter-id. If no matching datacenter-id then should display datacenter-name field as blank. I want to add the datacenter-name in the secondAry by matching id in firstAry and get datacenter-name field and add it in the secondAry.

Resulting array of object should be like this

Result = [   
{     "status": "Creating",     "cluster-id": "1test",     "cluster-name": "clu1",     "datacenter-id": "null" ,"datacenter-name": "null"  },   
{     "status": "Creating",     "cluster-id": "1test1",     "cluster-name": "clu1",     "datacenter-id": "id1", "datacenter-name": "data6"    },   
{     "status": "Creating",     "cluster-id": "1test113",     "cluster-name": "clu11",     "datacenter-id": "id1" , "datacenter-name": "data6"   },   
{     "status": "Creating",     "cluster-id": "2test2",     "cluster-name": "clu2",     "datacenter-id": "id2" ,"datacenter-name": "data7" },   
{     "status": "Creating",     "cluster-id": "2test22",     "cluster-name": "clu22",     "datacenter-id": "id2"  ,"datacenter-name": "data7" } ]

I tried filter method but its removing the element with no matching id. Kindly help how to achieve this?

Upvotes: 0

Views: 86

Answers (2)

Eliseo
Eliseo

Reputation: 57939

this.secondAry.forEach(x=>{
   const data=this.firstAry.find(f=>f['datacenter-id']==x['datacenter-id'])
   x['datacenter-name']=data?data['datacenter-name']:''
})

NOTE: it's would prefer use camelCase notation before using a "-". When use a "-" you need access to the property using obj['property'], else is simpe obj.property

Upvotes: 1

uiTeam324
uiTeam324

Reputation: 1245

Find the matching objects from first array by comparing it with second array. Modify the result and return a new modified array.

const result = secondAry.map(item => {
const searchedItem = firstAry.find(fItem => fItem['datacenter-id'] === 
item['datacenter-id'] );
if(searchedItem && Object.keys(searchedItem).length > 0 ){
  item['datacenter-name'] = searchedItem['datacenter-name']
}else{
   item['datacenter-name'] = 'null'
}
 return item;
});

console.log(result);

Upvotes: 0

Related Questions