merging 2 array of objects of different length based on same property

Question

I want to merge 2 array of objects based on "foodtypeid"of arr1 == "id of arr2 and output a final array with all keyvalue pairs from arr1 and foodCategoryDescription,description,fullname from arr2 present (arr1 may not be of equal length and order as arr2)

arr1 = [ { "age": 37, "gender": "Woman", "holdSeatId": "63282c0952dba06a20b52d72", "id": "6417f56a0c5374a4d72b5325", "PAXName": "Kangrou Fu", "seatName": "10A", "seatType": "BC", "vip": false, "containerId": "6417f5180c5374a4d72b4b63", "foodTypeId": "632000e0cdcfde6b6088001a", "locationId": "6417f5180c5374a4d72b4b66", "orderType": "Pre_Ordered", "qty": 1, "seatId": "63282c0952dba06a20b52d72" }, { "age": 40, "gender": "Woman", "holdSeatId": "6417f5440c5374a4d72b4fd4", "id": "6417f56a0c5374a4d72b5327", "PAXName": "Huishao Wu", "seatName": "21A", "seatType": "EC", "vip": false, "containerId": "6417f5180c5374a4d72b4b63", "foodTypeId": "6295bb887115c2151edef87d", "locationId": "6417f5180c5374a4d72b4b71", "orderType": "Special_Meal", "qty": 1, "seatId": "6417f5440c5374a4d72b4fd4" },

]

`arr2= [ { "categoryId": "629481212eebc502d0e6582a", "cost": 1, "description": "42116455", "foodCategoryDescription": "Drink", "foodCategoryName": "Drink", "foodTypeMaterialIds": [ "63295a9f4a66be483cd771ab" ], "fullName": "drink1", "id": "632000e0cdcfde6b6088001a", "partNumber": "42116455", "placeOfProduction": "HAM", "seatType": "EC", "serialNumber": "42116455", "shortName": "42116455", "weight": 500 }, { "categoryId": "629481212eebc502d0e6582a", "cost": 1, "description": "5000112547689", "foodCategoryDescription": "Drink", "foodCategoryName": "Drink", "foodTypeMaterialIds": [ "63295ae54a66be483cd771ae" ], "fullName": "drink2", "id": "6295bb887115c2151edef87d", "partNumber": "5000112547689", "placeOfProduction": "HAM", "seatType": "EC", "serialNumber": "5000112547689", "shortName": "5000112547689", "weight": 500 },

]

tried this but final output ignore key value pairs from arr2

arr6.forEach(obj1 => {
  let obj2 = arr7.find(obj2 => obj2.id === obj1.foodTypeId);
  if (obj2) {
    let mergedObj = {...obj1, ...obj2};
    mergedArr.push(mergedObj);
  } else {
    mergedArr.push(obj1);
  }
});

Mr. Polywhirl · Accepted Answer · 2023-03-22T15:19:43.770

All you need to do is map each item in arr1 to the corresponding object where:

arr1[x].id === arr2[y].foodTypeId

Also, you should probably give your object array variables better names to represent the collection. It lets the reader know what type of objects are stored in the array.

const main = () => {
  const mapped = customers.map(customer => ({
    ...customer,
    ...foodTypes.find(({ id }) => id === customer.foodTypeId)
  }));
  console.log(mapped);
};

const
  customers = [{
      "age": 37,
      "gender": "Woman",
      "holdSeatId": "63282c0952dba06a20b52d72",
      "id": "6417f56a0c5374a4d72b5325",
      "PAXName": "Kangrou Fu",
      "seatName": "10A",
      "seatType": "BC",
      "vip": false,
      "containerId": "6417f5180c5374a4d72b4b63",
      "foodTypeId": "632000e0cdcfde6b6088001a",
      "locationId": "6417f5180c5374a4d72b4b66",
      "orderType": "Pre_Ordered",
      "qty": 1,
      "seatId": "63282c0952dba06a20b52d72"
    }, {
      "age": 40,
      "gender": "Woman",
      "holdSeatId": "6417f5440c5374a4d72b4fd4",
      "id": "6417f56a0c5374a4d72b5327",
      "PAXName": "Huishao Wu",
      "seatName": "21A",
      "seatType": "EC",
      "vip": false,
      "containerId": "6417f5180c5374a4d72b4b63",
      "foodTypeId": "6295bb887115c2151edef87d",
      "locationId": "6417f5180c5374a4d72b4b71",
      "orderType": "Special_Meal",
      "qty": 1,
      "seatId": "6417f5440c5374a4d72b4fd4"
    },
  ],
  foodTypes = [{
    "categoryId": "629481212eebc502d0e6582a",
    "cost": 1,
    "description": "42116455",
    "foodCategoryDescription": "Drink",
    "foodCategoryName": "Drink",
    "foodTypeMaterialIds": ["63295a9f4a66be483cd771ab"],
    "fullName": "drink1",
    "id": "632000e0cdcfde6b6088001a",
    "partNumber": "42116455",
    "placeOfProduction": "HAM",
    "seatType": "EC",
    "serialNumber": "42116455",
    "shortName": "42116455",
    "weight": 500
  }, {
    "categoryId": "629481212eebc502d0e6582a",
    "cost": 1,
    "description": "5000112547689",
    "foodCategoryDescription": "Drink",
    "foodCategoryName": "Drink",
    "foodTypeMaterialIds": ["63295ae54a66be483cd771ae"],
    "fullName": "drink2",
    "id": "6295bb887115c2151edef87d",
    "partNumber": "5000112547689",
    "placeOfProduction": "HAM",
    "seatType": "EC",
    "serialNumber": "5000112547689",
    "shortName": "5000112547689",
    "weight": 500
  },
];
  
main();

.as-console-wrapper { top: 0; max-height: 100% !important; }

Instead of just spreading the values into a flat object, you could created a nested object. This way the foodType info is contained. You could also do this with location.

const main = () => {
  const mapped = customers.map(({ foodTypeId, ...customer }) => ({
    ...customer,
    foodType: foodTypes.find(({ id }) => id === foodTypeId)
  }));
  console.log(mapped);
};

const
  customers = [{
      "age": 37,
      "gender": "Woman",
      "holdSeatId": "63282c0952dba06a20b52d72",
      "id": "6417f56a0c5374a4d72b5325",
      "PAXName": "Kangrou Fu",
      "seatName": "10A",
      "seatType": "BC",
      "vip": false,
      "containerId": "6417f5180c5374a4d72b4b63",
      "foodTypeId": "632000e0cdcfde6b6088001a",
      "locationId": "6417f5180c5374a4d72b4b66",
      "orderType": "Pre_Ordered",
      "qty": 1,
      "seatId": "63282c0952dba06a20b52d72"
    }, {
      "age": 40,
      "gender": "Woman",
      "holdSeatId": "6417f5440c5374a4d72b4fd4",
      "id": "6417f56a0c5374a4d72b5327",
      "PAXName": "Huishao Wu",
      "seatName": "21A",
      "seatType": "EC",
      "vip": false,
      "containerId": "6417f5180c5374a4d72b4b63",
      "foodTypeId": "6295bb887115c2151edef87d",
      "locationId": "6417f5180c5374a4d72b4b71",
      "orderType": "Special_Meal",
      "qty": 1,
      "seatId": "6417f5440c5374a4d72b4fd4"
    },
  ],
  foodTypes = [{
    "categoryId": "629481212eebc502d0e6582a",
    "cost": 1,
    "description": "42116455",
    "foodCategoryDescription": "Drink",
    "foodCategoryName": "Drink",
    "foodTypeMaterialIds": ["63295a9f4a66be483cd771ab"],
    "fullName": "drink1",
    "id": "632000e0cdcfde6b6088001a",
    "partNumber": "42116455",
    "placeOfProduction": "HAM",
    "seatType": "EC",
    "serialNumber": "42116455",
    "shortName": "42116455",
    "weight": 500
  }, {
    "categoryId": "629481212eebc502d0e6582a",
    "cost": 1,
    "description": "5000112547689",
    "foodCategoryDescription": "Drink",
    "foodCategoryName": "Drink",
    "foodTypeMaterialIds": ["63295ae54a66be483cd771ae"],
    "fullName": "drink2",
    "id": "6295bb887115c2151edef87d",
    "partNumber": "5000112547689",
    "placeOfProduction": "HAM",
    "seatType": "EC",
    "serialNumber": "5000112547689",
    "shortName": "5000112547689",
    "weight": 500
  },
];
  
main();

.as-console-wrapper { top: 0; max-height: 100% !important; }

merging 2 array of objects of different length based on same property

1 Answers1