Adding embedded attributes from a different object

Question

Adding embedded attributes from a different object

I am facing a challenge with two arrays called metaObjects and justObjects.

These arrays consist of objects that share a common property called id.

My goal is to merge properties from the objects in these separate arrays into a new array.

const metaObjects = [
  {
    id: 1,
    metaProp: "metaProp1"
  },
  {
    id: 2,
    metaProp: "metaProp2"
  }
];

const justObjects = [
  {
    id: 1,
    justProp: "justProp1"
  },
  {
    id: 2,
    justProp: "justProp2"
  }
];

This is the desired outcome:

const result= [
    {
      id: 1,
      metaProp: "metaProp1",
      justProp: "justProp1"
    },
    {
      id: 2,
      metaProp: "metaProp2",
      justProp: "justProp2"
    }
  ];

I attempted using nested map functions to achieve this

const combinedObject = justObjects.map(_w => {
  return metaObjects.map(_m => {
    if (_w.id === _m.id) {
      return { ..._m, ..._w };
    }
  });
}, metaObjects);

console.log(combinedObject);

However, I encountered the following error

[ [ { id: 1, metaProp: 'metaProp1', justProp: 'justProp1' },
    undefined ],
  [ undefined,
    { id: 2, metaProp: 'metaProp2', justProp: 'justProp2' } ] ]

I am puzzled about why there are undefined values in the inner arrays.
Additionally, I need to flatten the arrays to align with the expected results provided above.

I have heard about utilizing the composable lens functions from ramda

Could this approach be beneficial in solving my issue?

javascript ramda.js

Answer 1

Answer №1

Similar to customcommander's answer, this approach opts for using groupBy and values instead of sortBy and groupWith. It seems more logical and avoids an unnecessary sort call.

const {pipe, concat, groupBy, prop, values, map, mergeAll} = R

const joinOnId = pipe
  ( concat
  , groupBy (prop ('id'))
  , values
  , map (mergeAll)
  )

const metaObjects = 
  [ { id: 1, metaProp: "metaProp1" }
  , { id: 2, metaProp: "metaProp2" }
  , { id: 3, metaProp: "metaProp3" }  // unique to `meta`
  ]

const justObjects = 
  [ { id: 1, justProp: "justProp1" }
  , { id: 2, justProp: "justProp2" }
  , { id: 4, justProp: "justProp4" }  // unique to `just`
  ]

console.log 
  ( joinOnId (metaObjects, justObjects)
  )

.as-console-wrapper {
  max-height: 100vh !important;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.26.1/ramda.js"></script>

This function can easily be adapted to accommodate different property names:

const joinOn = (propName) =>
  pipe
    ( concat
    , groupBy (prop (propName))
    , values
    , map (mergeAll)
    )
// ...
const joinOnId = joinOn ('id')

and it can also utilize various key-generation functions:

const joinOn = (keyFn) =>
  pipe
    ( concat
    , groupBy (keyFn)
    , values
    , map (mergeAll)
    )
// ...
const joinOnId = joinOn (prop ('id'))

Answer 2

Similar to customcommander's answer, this approach opts for using groupBy and values instead of sortBy and groupWith. It seems more logical and avoids an unnecessary sort call.

const {pipe, concat, groupBy, prop, values, map, mergeAll} = R

const joinOnId = pipe
  ( concat
  , groupBy (prop ('id'))
  , values
  , map (mergeAll)
  )

const metaObjects = 
  [ { id: 1, metaProp: "metaProp1" }
  , { id: 2, metaProp: "metaProp2" }
  , { id: 3, metaProp: "metaProp3" }  // unique to `meta`
  ]

const justObjects = 
  [ { id: 1, justProp: "justProp1" }
  , { id: 2, justProp: "justProp2" }
  , { id: 4, justProp: "justProp4" }  // unique to `just`
  ]

console.log 
  ( joinOnId (metaObjects, justObjects)
  )

.as-console-wrapper {
  max-height: 100vh !important;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.26.1/ramda.js"></script>

This function can easily be adapted to accommodate different property names:

const joinOn = (propName) =>
  pipe
    ( concat
    , groupBy (prop (propName))
    , values
    , map (mergeAll)
    )
// ...
const joinOnId = joinOn ('id')

and it can also utilize various key-generation functions:

const joinOn = (keyFn) =>
  pipe
    ( concat
    , groupBy (keyFn)
    , values
    , map (mergeAll)
    )
// ...
const joinOnId = joinOn (prop ('id'))

Answer 3

Answer №2

To combine objects, you can use the find() method to search for the object and then merge them using Object.assign(). Make sure that the object exists in metaObjects before merging.

const metaObjects = [
  {
    id: 1,
    metaProp: "metaProp1"
  },
  {
    id: 2,
    metaProp: "metaProp2"
  }
];

const justObjects = [
  {
    id: 1,
    justProp: "justProp1"
  },
  {
    id: 2,
    justProp: "justProp2"
  }
];

justObjects.forEach(item => {
   let toMerge = metaObjects.find(obj => obj.id === item.id)
   Object.assign(toMerge, item)
})
console.log(metaObjects)

If metaObjects is large, consider storing it as an object with keys based on id for faster lookups without searching each time.

If you prefer not to modify metaObjects, you can use map() on justObjects to create a new array:

const metaObjects = [
  {
    id: 1,
    metaProp: "metaProp1"
  },
  {
    id: 2,
    metaProp: "metaProp2"
  }
];

const justObjects = [
  {
    id: 1,
    justProp: "justProp1"
  },
  {
    id: 2,
    justProp: "justProp2"
  }
];

let newArray = justObjects.map(item => {
   let toMerge = metaObjects.find(obj => obj.id === item.id)
   return Object.assign({}, toMerge, item)
})
// metaObjects remains unchanged
console.log(newArray)

Answer 4

To combine objects, you can use the find() method to search for the object and then merge them using Object.assign(). Make sure that the object exists in metaObjects before merging.

const metaObjects = [
  {
    id: 1,
    metaProp: "metaProp1"
  },
  {
    id: 2,
    metaProp: "metaProp2"
  }
];

const justObjects = [
  {
    id: 1,
    justProp: "justProp1"
  },
  {
    id: 2,
    justProp: "justProp2"
  }
];

justObjects.forEach(item => {
   let toMerge = metaObjects.find(obj => obj.id === item.id)
   Object.assign(toMerge, item)
})
console.log(metaObjects)

If metaObjects is large, consider storing it as an object with keys based on id for faster lookups without searching each time.

If you prefer not to modify metaObjects, you can use map() on justObjects to create a new array:

const metaObjects = [
  {
    id: 1,
    metaProp: "metaProp1"
  },
  {
    id: 2,
    metaProp: "metaProp2"
  }
];

const justObjects = [
  {
    id: 1,
    justProp: "justProp1"
  },
  {
    id: 2,
    justProp: "justProp2"
  }
];

let newArray = justObjects.map(item => {
   let toMerge = metaObjects.find(obj => obj.id === item.id)
   return Object.assign({}, toMerge, item)
})
// metaObjects remains unchanged
console.log(newArray)

Answer 5

Answer №3

To combine the two arrays, group objects by id (ensuring to sort first), and then merge each grouped item together can be achieved quite simply:

const {
  map,
  mergeAll,
  groupWith,
  eqBy,
  prop,
  concat,
  sortBy,
  pipe
} = R;

const metaObjects = [
  { id: 1,
    metaProp: "metaProp1" },
  { id: 2,
    metaProp: "metaProp2" }];

const justObjects = [
  { id: 1,
    justProp: "justProp1" },
  { id: 2,
    justProp: "justProp2" }];

const process = pipe(
  concat,
  sortBy(prop('id')),
  groupWith(eqBy(prop('id'))),
  map(mergeAll));

console.log(

  process(metaObjects, justObjects)

);

<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.26.1/ramda.min.js"></script>

Answer 6

To combine the two arrays, group objects by id (ensuring to sort first), and then merge each grouped item together can be achieved quite simply:

const {
  map,
  mergeAll,
  groupWith,
  eqBy,
  prop,
  concat,
  sortBy,
  pipe
} = R;

const metaObjects = [
  { id: 1,
    metaProp: "metaProp1" },
  { id: 2,
    metaProp: "metaProp2" }];

const justObjects = [
  { id: 1,
    justProp: "justProp1" },
  { id: 2,
    justProp: "justProp2" }];

const process = pipe(
  concat,
  sortBy(prop('id')),
  groupWith(eqBy(prop('id'))),
  map(mergeAll));

console.log(

  process(metaObjects, justObjects)

);

<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.26.1/ramda.min.js"></script>

Answer 7

Answer №4

To transform an array of objects with an "id" property into an object of objects, I recommend using either the Array.prototype.reduce() method or a simple for loop:

const merged = metaObjects.reduce((acc, cur) => {
    acc[cur.id] = cur;

    return acc;
}, {});

Alternatively:

const merged = {};

for (const obj of metaObjects) {
    merged[obj.id] = obj;
}

Next, iterate through the other array and merge each entry with the object created above:

justObjects.forEach((obj) => {
    merged[obj.id] = Object.assign({}, merged[obj.id], obj);
});

Finally, convert the resulting object back into an array using Object.values:

Object.values(merged);

For example:

const metaObjects = [{
  id: 1,
  metaProp: "metaProp1"
},{
  id: 2,
  metaProp: "metaProp2"
}];

const justObjects = [{
  id: 1,
  justProp: "justProp1"
},{
  id: 2,
  justProp: "justProp2"
},{
  id: 3,
  justProp: "justProp3"
}];

// Create an object from one of the arrays using its id property:

/*
// Alternative using reduce:

const merged = metaObjects.reduce((acc, cur) => {
  acc[cur.id] = cur;
  
  return acc;
}, {});
*/

// Alternative using a for loop:

const merged = {};

for (const obj of metaObjects) {
  merged[obj.id] = obj;
}

// Iterate through the other array and merge it with the existing map:

justObjects.forEach((obj) => {
  merged[obj.id] = Object.assign({}, merged[obj.id], obj);
});

// Convert back to an array of objects:

console.log(Object.values(merged));

.as-console-wrapper {
  max-height: 100vh !important;
}

It is worth noting that this approach will handle cases where either array contains entries with ids not found in the other.

Answer 8

To transform an array of objects with an "id" property into an object of objects, I recommend using either the Array.prototype.reduce() method or a simple for loop:

const merged = metaObjects.reduce((acc, cur) => {
    acc[cur.id] = cur;

    return acc;
}, {});

Alternatively:

const merged = {};

for (const obj of metaObjects) {
    merged[obj.id] = obj;
}

Next, iterate through the other array and merge each entry with the object created above:

justObjects.forEach((obj) => {
    merged[obj.id] = Object.assign({}, merged[obj.id], obj);
});

Finally, convert the resulting object back into an array using Object.values:

Object.values(merged);

For example:

const metaObjects = [{
  id: 1,
  metaProp: "metaProp1"
},{
  id: 2,
  metaProp: "metaProp2"
}];

const justObjects = [{
  id: 1,
  justProp: "justProp1"
},{
  id: 2,
  justProp: "justProp2"
},{
  id: 3,
  justProp: "justProp3"
}];

// Create an object from one of the arrays using its id property:

/*
// Alternative using reduce:

const merged = metaObjects.reduce((acc, cur) => {
  acc[cur.id] = cur;
  
  return acc;
}, {});
*/

// Alternative using a for loop:

const merged = {};

for (const obj of metaObjects) {
  merged[obj.id] = obj;
}

// Iterate through the other array and merge it with the existing map:

justObjects.forEach((obj) => {
  merged[obj.id] = Object.assign({}, merged[obj.id], obj);
});

// Convert back to an array of objects:

console.log(Object.values(merged));

.as-console-wrapper {
  max-height: 100vh !important;
}

It is worth noting that this approach will handle cases where either array contains entries with ids not found in the other.

Adding embedded attributes from a different object

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

When utilizing AJAX within a for loop, the array position may not return the correct values, even though the closure effectively binds the scope of the current value position

Send information to modal using Javascript

Submitting data with ajax in MVC when an option is chosen in a dropdown menu

Retrieve data from a list using an API

jquery technique for toggling a single button

Retrieve the player's name from the database using jQuery

Accessing and displaying all states in $stateProvider using AngularJS and ui-router

Tips for effectively managing 404 errors in Angular 10 with modular routing

Using Vuex: Delay dispatch of action until websocket response received

I am facing an issue where my Javascript hide and show function is not working properly when clicked. Despite not giving

angularjs determining the appropriate time to utilize a directive

Exploring the syntax of ReactJS state management with setState

Determine the worth of various object attributes and delete them from the list

The presence of 'touched' within Angular validation is causing a delay in method execution

scope.$digest completes before triggering scope.$watch in Karma unit tests

Loop through the AJAX response containing JSON data

What could be causing the absence of any displayed content in FirBug when typing in the Google Search box?

"Error alert: The specified property 'Iscontains' cannot be read because it is undefined" appears in the script for this video

How to troubleshoot NodeJS errors when piping data from tar packing to webhdfs

Tips for utilizing javascript document.createElement, document.body, and $(document) in an HTML web resource for Microsoft CRM code reviews