inserting object that matches the property

Question

How do we insert the object 1 to each object on Object 2 below so that each object will have the value from the first object , so the property from Object which are firstMileRange , secondMileRange and thirdMileRange will be replaced with the values from the Object 1.

Any idea guys would be much appreciated. Thanks.

#Object 1 - data or object to insert

[
    {
        "firstMileRange": 1,
        "secondMileRange": 2,
        "thirdMileRange": 3
    }
]

#Object 2 - object to insert the data to

[
    {
        "id": 1521,
        "demographicType": "Demos",
        "demos": "Estimated Population",
        "streetName": null,
        "vehicleCount": null,
        "firstMile": 100000,
        "firstMileRange": null,
        "secondMile": 50000,
        "secondMileRange": null,
        "thirdMile": 50000,
        "thirdMileRange": null
    },
    {
        "id": 1522,
        "demographicType": "Demos",
        "demos": "Households",
        "streetName": null,
        "vehicleCount": null,
        "firstMile": 5999,
        "firstMileRange": null,
        "secondMile": 5999,
        "secondMileRange": null,
        "thirdMile": 5999,
        "thirdMileRange": null
    },
]

#expectedOutput

[
    {
        "id": 1521,
        "demographicType": "Demos",
        "demos": "Estimated Population",
        "streetName": null,
        "vehicleCount": null,
        "firstMile": 100000,
        "firstMileRange": 1,
        "secondMile": 50000,
        "secondMileRange": 2,
        "thirdMile": 50000,
        "thirdMileRange": 3
    },
    {
        "id": 1522,
        "demographicType": "Demos",
        "demos": "Households",
        "streetName": null,
        "vehicleCount": null,
        "firstMile": 5999,
        "firstMileRange": 1,
        "secondMile": 5999,
        "secondMileRange": 2,
        "thirdMile": 5999,
        "thirdMileRange": 3,
    },
]

Answer 1

.map() to iterate through 2nd array. On each object of 2nd array merge 1st array to object of 2nd array:

Object.assign(obj2, ...arr1)
// spread ... arr2 to expose the object inside of it.

const update = [{
  "firstMileRange": 1,
  "secondMileRange": 2,
  "thirdMileRange": 3
}];

const group = [{
    "id": 1521,
    "demographicType": "Demos",
    "demos": "Estimated Population",
    "streetName": null,
    "vehicleCount": null,
    "firstMile": 100000,
    "firstMileRange": null,
    "secondMile": 50000,
    "secondMileRange": null,
    "thirdMile": 50000,
    "thirdMileRange": null
  },
  {
    "id": 1522,
    "demographicType": "Demos",
    "demos": "Households",
    "streetName": null,
    "vehicleCount": null,
    "firstMile": 5999,
    "firstMileRange": null,
    "secondMile": 5999,
    "secondMileRange": null,
    "thirdMile": 5999,
    "thirdMileRange": null
  }
];

const updated = group.map(obj => Object.assign(obj, ...update));

console.log(updated);

Answer 2

const array1 = [{a: 1, b: 1, c: 1}, {a: 2, b: 2, c: 2}, {a: 3, b: 3, c: 3}];
const obj = { a: 999, b: 123 }

array1.forEach(o => { o.a = obj.a; o.b = obj.b; });

console.log(array1);

// expected output: Array [Object { a: 999, b: 123, c: 1 }, Object { a: 999, b: 123, c: 2 }, Object { a: 999, b: 123, c: 3 }]

Answer 3

You may loop through the array that contains the objects using the map method and merge the object with each object found on the array.

const objectsArray = [{
      id: 1521,
      demographicType: "Demos",
      demos: "Estimated Population ",
      streetName: null,
      vehicleCount: null,
      firstMile: 100000,
      firstMileRange: null,
      secondMile: 50000,
      secondMileRange: null,
      thirdMile: 50000,
      thirdMileRange: null
    },
    {
      id: 1522,
      demographicType: "Demos",
      demos: "Households",
      streetName: null,
      vehicleCount: null,
      firstMile: 5999,
      firstMileRange: null,
      secondMile: 5999,
      secondMileRange: null,
      thirdMile: 5999,
      thirdMileRange: null
    }
  ],
  theObject = {
    firstMileRange: 1,
    secondMileRange: 2,
    thirdMileRange: 3
  },
  /** merge an object into another */
  merge = (arr, obj) => arr.map(o => o = {...o, ...obj});

console.log(merge(objectsArray, theObject));

The above example works as expected but it has an issue! What if the object you want to apply to the other objects contains attributes you don't want them to be merged in the final array of objects ? The above example will merge these unwanted attribute! To solve that, we may have a map of the wanted attributes that should be extracted.

const objectsArray = [{
      id: 1521,
      demographicType: 'Demos',
      demos: 'Estimated Population',
      streetName: null,
      vehicleCount: null,
      firstMile: 100000,
      firstMileRange: null,
      secondMile: 50000,
      secondMileRange: null,
      thirdMile: 50000,
      thirdMileRange: null
    },
    {
      id: 1522,
      demographicType: 'Demos',
      demos: 'Households',
      streetName: null,
      vehicleCount: null,
      firstMile: 5999,
      firstMileRange: null,
      secondMile: 5999,
      secondMileRange: null,
      thirdMile: 5999,
      thirdMileRange: null
    }
  ],
  theObject = {
    firstMileRange: 1,
    secondMileRange: 2,
    thirdMileRange: 3,
    unwantedAttr1: 'should not',
    unwantedAttr2: 'be merged'
  },
  attributesMap = ['firstMileRange', 'secondMileRange', 'thirdMileRange'],
  /** merges an object into another, only attributes passed as the third parameter will be merged and any other attribute will be ignored  */
merge = (arr, obj, attrs) => arr.map(o => {
  attrs.forEach(a => o[a] = obj[a] || null);
  return o;
});

console.log(merge(objectsArray, theObject, attributesMap));

With that, unwantedAttr1 and unwantedAttr2 will not be merged into the objects as they dont appear in attributesMap that was passed to the merge function.