JavaScript map id from one array of object to another

October 4, 2023

const rowData = [];
const arr1 = [{
    "bId": "F1.1.4",
    "bName": "Mercedes",
    "cId": "150494",
    "cName": "Benz",
    "flag": "Maintain"
  },
  {
    "bId": "F1.1.4",
    "bName": "Ford",
    "cId": "150744",
    "cName": "Mustang",
    "flag": "Maintain"
  },
  {
    "bId": "F1.1.4",
    "bName": "Volkswagon",
    "cId": "4961",
    "cName": "Polo",
    "flag": "Maintain"
  },
  {
    "bId": "F1.1.5",
    "bName": "Isdera",
    "cId": "N/A",
    "cName": "Isdera",
    "flag": "Test"
  }
]

const arr2 = [{
    "cId": "150494",
    "flag": "Decommission"
  },
  {
    "cId": "150744",
    "flag": "Invest"
  },
  {
    "cId": "4961",
    "flag": "Pending"
  }
]

for (let i = 0; i < arr1.length; i++) {
  const obj = {
    custId: arr1[i].cId,
    custName: arr1[i].cName,
    bId: arr1[i].bId,
    bufName: arr1[i].bName,
    impFlag: arr2.filter(({cId}) => cId === arr1[i].cId).map(({flag}) => (flag)).toString()
  };
  rowData.push(obj);
}
console.log(rowData)

Hi, I’m checking if cId in arr2 is present in arr1 and based on it I’m updating the flag for which cId is present, but for the remaining values which are not present in arr2, impFlag is coming as "". It should remain the same as in arr1. I’m not sure how to add conditions accordingly??

>Solution :

Since "" is the only falsy value that you’ll get from calling Array.prototype.toString(), you can use the || (OR) operator to provide a default value when there are no matching flags, eg:

arr2.filter(...).map(...).toString() || arr1[i].flag

Above, when .toString() results in a falsy "" value, the right-hand side of the || operator is used as the result instead. Note that .filter() is good if you have an array of results, which means that there are potentially multiple objects with the same cId in arr2. If you can only have one object, then .find() instead of filter would be more appropriate:

arr2.find(...)?.flag ?? arr1[i].flag

const rowData = [];
const arr1 = [{ "bId": "F1.1.4", "bName": "Mercedes", "cId": "150494", "cName": "Benz", "flag": "Maintain" }, { "bId": "F1.1.4", "bName": "Ford", "cId": "150744", "cName": "Mustang", "flag": "Maintain" }, { "bId": "F1.1.4", "bName": "Volkswagon", "cId": "4961", "cName": "Polo", "flag": "Maintain" }, { "bId": "F1.1.5", "bName": "Isdera", "cId": "N/A", "cName": "Isdera", "flag": "Test" } ];
const arr2 = [{ "cId": "150494", "flag": "Decommission" }, { "cId": "150744", "flag": "Invest" }, { "cId": "4961", "flag": "Pending" } ];


for (let i = 0; i < arr1.length; i++) {
  const obj = {
    custId: arr1[i].cId,
    custName: arr1[i].cName,
    bId: arr1[i].bId,
    bufName: arr1[i].bName,
    impFlag: arr2.filter(({cId}) => cId === arr1[i].cId).map(({flag}) => (flag)).toString() || arr1[i].flag
  };
  rowData.push(obj);
}
console.log(rowData)

Personally, I would write this logic as below. As you’re performing a mapping operator, .map() is a good tool for this:

const arr1 = [{ "bId": "F1.1.4", "bName": "Mercedes", "cId": "150494", "cName": "Benz", "flag": "Maintain" }, { "bId": "F1.1.4", "bName": "Ford", "cId": "150744", "cName": "Mustang", "flag": "Maintain" }, { "bId": "F1.1.4", "bName": "Volkswagon", "cId": "4961", "cName": "Polo", "flag": "Maintain" }, { "bId": "F1.1.5", "bName": "Isdera", "cId": "N/A", "cName": "Isdera", "flag": "Test" } ];
const arr2 = [{ "cId": "150494", "flag": "Decommission" }, { "cId": "150744", "flag": "Invest" }, { "cId": "4961", "flag": "Pending" } ];


const cIdMap = new Map(arr2.map(({cId, flag}) => [cId, flag]));

const rowData = arr1.map((obj) => ({
  custId: obj.cId,
  custName: obj.cName,
  bId: obj.bId,
  bufName: obj.bName,
  impFlag: cIdMap.get(obj.cId) ?? obj.flag
}));

console.log(rowData)

Here, the Map creates a structure that maps the cId value to its corresponding flag value (this assumes each cId is unique in arr2). This Map is then accessed in the .map() callback, where we use the nullish coalescing operator ?? to make the current object’s flag (obj.flag) the default if the Map doesn’t contain a cId mapping for the current object.