Merging arrays of objects in JavaScript to create a fresh one

Question

Merging arrays of objects in JavaScript to create a fresh one

I am struggling to combine two sets of data into a single array by matching them based on the day. I want to create a new array of objects that include the relevant information from both sets. The first set includes the following:

[
  { date: '9/30/2017', day: 'Saturday' },
  { date: '10/1/2017', day: 'Sunday' },
  { date: '10/2/2017', day: 'Monday' },
  { date: '10/3/2017', day: 'Tuesday' },
  { date: '10/4/2017', day: 'Wednesday' },
  { date: '10/5/2017', day: 'Thursday' },
  { date: '10/6/2017', day: 'Friday' },
  { date: '10/7/2017', day: 'Saturday' },
  { date: '10/8/2017', day: 'Sunday' },
  { date: '10/9/2017', day: 'Monday' },
  { date: '10/10/2017', day: 'Tuesday' }
]

and

[
 {
    day: 'Sunday',
    totalHours: 10,
    serveTimes: [ { startTime: 5, stopTime: 15 } ]
  },
  {
    day: 'Monday',
    totalHours: 10,
    serveTimes: [ { startTime: 5, stopTime: 10 }, { startTime: 15, stopTime: 20 } ]
  },
  {
    day: 'Tuesday',
    totalHours: 3,
    serveTimes: [ { startTime: 2, stopTime: 5 } ]
  },
  {
    day: 'Wednesday',
    totalHours: 10,
    serveTimes: [ { startTime: 5, stopTime: 15 } ]
  },
  {
    day: 'Thursday',
    totalHours: 5,
    serveTimes: [ { startTime: 5, stopTime: 7 }, { startTime: 20, stopTime: 23 } ]
  },
  {
    day: 'Friday',
    totalHours: 5,
    serveTimes: [ { startTime: 5, stopTime: 10 } ]
  },
  {
    day: 'Saturday',
    totalHours: 10,
    serveTimes: [ { startTime: 5, stopTime: 10 }, { startTime: 13, stopTime: 18 } ]
  }
]

This was the code I used:

function finalFormat (a, d) {
  var combined = a.concat(d)
  var final = _(combined)
    .groupBy('day')
    .map(_.spread(_.assign))
    .value()
  return final
}

However, the resulting array is missing data for some dates as shown below:

[...]

It lacks information for all dates, and I'm feeling stuck. Can someone offer guidance?

javascript arrays

Answer 1

Answer №1

You can utilize the map method for this task. Another option is to employ the Map collection, which allows for constant time complexity (O(1)) when accessing items during the mapping process:

const uniqueDays = new Map(secondArray.map(s => [s.day, s]));
const result = firstArray.map(({date, day})=> ({date, ...uniqueDays.get(day)}));

Here's an example:

const firstArray = [
  { date: '9/30/2017', day: 'saturday' },
  { date: '10/1/2017', day: 'sunday' },
  { date: '10/2/2017', day: 'monday' },
  { date: '10/3/2017', day: 'tuesday' },
  { date: '10/4/2017', day: 'wednesday' },
  { date: '10/5/2017', day: 'thursday' },
  { date: '10/6/2017', day: 'friday' },
  { date: '10/7/2017', day: 'saturday' },
  { date: '10/8/2017', day: 'sunday' },
  { date: '10/9/2017', day: 'monday' },
  { date: '10/10/2017', day: 'tuesday' }
];

const secondArray = [
  {
     day: 'sunday',
     totalHours: 10,
     serveTimes: [ { startTime: 5, stopTime: 15 } ]
   },
   {
     day: 'monday',
     totalHours: 10,
     serveTimes: [ { startTime: 5, stopTime: 10 }, { startTime: 15, stopTime: 20 } ]
   },
   {
     day: 'tuesday',
     totalHours: 3,
     serveTimes: [ { startTime: 2, stopTime: 5 } ]
   },
   {
     day: 'wednesday',
     totalHours: 10,
     serveTimes: [ { startTime: 5, stopTime: 15 } ]
   },
   {
     day: 'thursday',
     totalHours: 5,
     serveTimes: [ { startTime: 5, stopTime: 7 }, { startTime: 20, stopTime: 23 } ]
   },
   {
     day: 'friday',
     totalHours: 5,
     serveTimes: [ { startTime: 5, stopTime: 10 } ]
   },
   {
     day: 'saturday',
     totalHours: 10,
     serveTimes: [ { startTime: 5, stopTime: 10 }, { startTime: 13, stopTime: 18 } ]
   }
 ];

 const uniqueDays = new Map(secondArray.map(s => [s.day, s]));
 const result = firstArray.map(({date, day})=> ({date,  ...uniqueDays.get(day)}));
 console.log(result);

Answer 2

You can utilize the map method for this task. Another option is to employ the Map collection, which allows for constant time complexity (O(1)) when accessing items during the mapping process:

const uniqueDays = new Map(secondArray.map(s => [s.day, s]));
const result = firstArray.map(({date, day})=> ({date, ...uniqueDays.get(day)}));

Here's an example:

const firstArray = [
  { date: '9/30/2017', day: 'saturday' },
  { date: '10/1/2017', day: 'sunday' },
  { date: '10/2/2017', day: 'monday' },
  { date: '10/3/2017', day: 'tuesday' },
  { date: '10/4/2017', day: 'wednesday' },
  { date: '10/5/2017', day: 'thursday' },
  { date: '10/6/2017', day: 'friday' },
  { date: '10/7/2017', day: 'saturday' },
  { date: '10/8/2017', day: 'sunday' },
  { date: '10/9/2017', day: 'monday' },
  { date: '10/10/2017', day: 'tuesday' }
];

const secondArray = [
  {
     day: 'sunday',
     totalHours: 10,
     serveTimes: [ { startTime: 5, stopTime: 15 } ]
   },
   {
     day: 'monday',
     totalHours: 10,
     serveTimes: [ { startTime: 5, stopTime: 10 }, { startTime: 15, stopTime: 20 } ]
   },
   {
     day: 'tuesday',
     totalHours: 3,
     serveTimes: [ { startTime: 2, stopTime: 5 } ]
   },
   {
     day: 'wednesday',
     totalHours: 10,
     serveTimes: [ { startTime: 5, stopTime: 15 } ]
   },
   {
     day: 'thursday',
     totalHours: 5,
     serveTimes: [ { startTime: 5, stopTime: 7 }, { startTime: 20, stopTime: 23 } ]
   },
   {
     day: 'friday',
     totalHours: 5,
     serveTimes: [ { startTime: 5, stopTime: 10 } ]
   },
   {
     day: 'saturday',
     totalHours: 10,
     serveTimes: [ { startTime: 5, stopTime: 10 }, { startTime: 13, stopTime: 18 } ]
   }
 ];

 const uniqueDays = new Map(secondArray.map(s => [s.day, s]));
 const result = firstArray.map(({date, day})=> ({date,  ...uniqueDays.get(day)}));
 console.log(result);

Answer 3

Answer №2

var weekdays = [
  { date: '9/30/2017', day: 'saturday' },
  { date: '10/1/2017', day: 'sunday' },
  { date: '10/2/2017', day: 'monday' },
  { date: '10/3/2017', day: 'tuesday' },
  { date: '10/4/2017', day: 'wednesday' },
  { date: '10/5/2017', day: 'thursday' },
  { date: '10/6/2017', day: 'friday' },
  { date: '10/7/2017', day: 'saturday' },
  { date: '10/8/2017', day: 'sunday' },
  { date: '10/9/2017', day: 'monday' },
  { date: '10/10/2017', day: 'tuesday' }
];

var activities = [
 {
    day: 'sunday',
    totalHours: 10,
    serveTimes: [ { startTime: 5, stopTime: 15 } ]
  },
  {
    day: 'monday',
    totalHours: 10,
    serveTimes: [ { startTime: 5, stopTime: 10 }, { startTime: 15, stopTime: 20 } ]
  },
  {
    day: 'tuesday',
    totalHours: 3,
    serveTimes: [ { startTime: 2, stopTime: 5 } ]
  },
  {
    day: 'wednesday',
    totalHours: 10,
    serveTimes: [ { startTime: 5, stopTime: 15 } ]
  },
  {
    day: 'thursday',
    totalHours: 5,
    serveTimes: [ { startTime: 5, stopTime: 7 }, { startTime: 20, stopTime: 23 } ]
  },
  {
    day: 'friday',
    totalHours: 5,
    serveTimes: [ { startTime: 5, stopTime: 10 } ]
  },
  {
    day: 'saturday',
    totalHours: 10,
    serveTimes: [ { startTime: 5, stopTime: 10 }, { startTime: 13, stopTime: 18 } ]
  }
];

var updatedWeekdays = [];

weekdays.forEach(function(day){
    activities.forEach(function(activity){
        if(day.day === activity.day){
            day.totalHours = activity.totalHours;
            day.serveTimes = activity.serveTimes;
        }
    });
    updatedWeekdays.push(day);
});

You can simplify this further using different array methods like map, filter, or reduce. This is just one way to approach it.

Answer 4

var weekdays = [
  { date: '9/30/2017', day: 'saturday' },
  { date: '10/1/2017', day: 'sunday' },
  { date: '10/2/2017', day: 'monday' },
  { date: '10/3/2017', day: 'tuesday' },
  { date: '10/4/2017', day: 'wednesday' },
  { date: '10/5/2017', day: 'thursday' },
  { date: '10/6/2017', day: 'friday' },
  { date: '10/7/2017', day: 'saturday' },
  { date: '10/8/2017', day: 'sunday' },
  { date: '10/9/2017', day: 'monday' },
  { date: '10/10/2017', day: 'tuesday' }
];

var activities = [
 {
    day: 'sunday',
    totalHours: 10,
    serveTimes: [ { startTime: 5, stopTime: 15 } ]
  },
  {
    day: 'monday',
    totalHours: 10,
    serveTimes: [ { startTime: 5, stopTime: 10 }, { startTime: 15, stopTime: 20 } ]
  },
  {
    day: 'tuesday',
    totalHours: 3,
    serveTimes: [ { startTime: 2, stopTime: 5 } ]
  },
  {
    day: 'wednesday',
    totalHours: 10,
    serveTimes: [ { startTime: 5, stopTime: 15 } ]
  },
  {
    day: 'thursday',
    totalHours: 5,
    serveTimes: [ { startTime: 5, stopTime: 7 }, { startTime: 20, stopTime: 23 } ]
  },
  {
    day: 'friday',
    totalHours: 5,
    serveTimes: [ { startTime: 5, stopTime: 10 } ]
  },
  {
    day: 'saturday',
    totalHours: 10,
    serveTimes: [ { startTime: 5, stopTime: 10 }, { startTime: 13, stopTime: 18 } ]
  }
];

var updatedWeekdays = [];

weekdays.forEach(function(day){
    activities.forEach(function(activity){
        if(day.day === activity.day){
            day.totalHours = activity.totalHours;
            day.serveTimes = activity.serveTimes;
        }
    });
    updatedWeekdays.push(day);
});

You can simplify this further using different array methods like map, filter, or reduce. This is just one way to approach it.

Answer 5

Answer №3

Your arrays have different sizes - the first array contains 11 objects, while the second array has only 7 objects.

Determine which array is larger by comparing their sizes using the .length property.
Select a common key that all objects share (e.g. "day").
Iterate through the larger array (the first array - referred to as dates in the example).
Within each iteration of the larger array, go through the smaller array (the second array - called hours in the demo) to find the key of the current object and match its value with the objects in the smaller array. For instance, an object in dates with
```
"day": "friday"
```
should align with the object in hours that also has
```
"day": "friday"
```
.
Whenever there is a match, merge the objects using Object.assign().

Demo

let dates=[{date:"9/30/2017",day:"saturday"},{date:"10/1/2017",day:"sunday"},{date:"10/2/2017",day:"monday"},{date:"10/3/2017",day:"tuesday"},{date:"10/4/2017",day:"wednesday"},{date:"10/5/2017",day:"thursday"},{date:"10/6/2017",day:"friday"},{date:"10/7/2017",day:"saturday"},{date:"10/8/2017",day:"sunday"},{date:"10/9/2017",day:"monday"},{date:"10/10/2017",day:"tuesday"}],hours=[{day:"sunday",totalHours:10,serveTimes:[{startTime:5,stopTime:15}]},{day:"monday",totalHours:10,serveTimes:[{startTime:5,stopTime:10},{startTime:15,stopTime:20}]},{day:"tuesday",totalHours:3,serveTimes:[{startTime:2,stopTime:5}]},{... ; 

const schedule = mergeByKV('day', dates, hours);
console.log(JSON.stringify(schedule, null, 2));

Answer 6

Your arrays have different sizes - the first array contains 11 objects, while the second array has only 7 objects.

Determine which array is larger by comparing their sizes using the .length property.
Select a common key that all objects share (e.g. "day").
Iterate through the larger array (the first array - referred to as dates in the example).
Within each iteration of the larger array, go through the smaller array (the second array - called hours in the demo) to find the key of the current object and match its value with the objects in the smaller array. For instance, an object in dates with
```
"day": "friday"
```
should align with the object in hours that also has
```
"day": "friday"
```
.
Whenever there is a match, merge the objects using Object.assign().

Demo

let dates=[{date:"9/30/2017",day:"saturday"},{date:"10/1/2017",day:"sunday"},{date:"10/2/2017",day:"monday"},{date:"10/3/2017",day:"tuesday"},{date:"10/4/2017",day:"wednesday"},{date:"10/5/2017",day:"thursday"},{date:"10/6/2017",day:"friday"},{date:"10/7/2017",day:"saturday"},{date:"10/8/2017",day:"sunday"},{date:"10/9/2017",day:"monday"},{date:"10/10/2017",day:"tuesday"}],hours=[{day:"sunday",totalHours:10,serveTimes:[{startTime:5,stopTime:15}]},{day:"monday",totalHours:10,serveTimes:[{startTime:5,stopTime:10},{startTime:15,stopTime:20}]},{day:"tuesday",totalHours:3,serveTimes:[{startTime:2,stopTime:5}]},{... ; 

const schedule = mergeByKV('day', dates, hours);
console.log(JSON.stringify(schedule, null, 2));

Merging arrays of objects in JavaScript to create a fresh one

Answer №1

Answer №2

Answer №3

Demo

Similar questions

Whenever the user hits the "Enter" key, a new element will be generated and added to the bottom of an existing element

Performing operations atomically within a threaded environment

This code encountered an Uncaught SyntaxError due to an invalid or unexpected token

Error encountered in Next.js while fetching data: Invalid JSON response received, with an unexpected token "<" at the start of the JSON data

Creating a dynamic path to an imported file in React: A step-by-step guide

Expanding and collapsing all divs with a single click using Jquery

Display the component's template when invoking methods

Ways to integrate PHP MySQL with NodeJS and SocketIO

Can you combine multiple user validation rules with express-validator?

The jQuery script tag fails to recognize click events once dynamically loaded with the load event

Stop the background from being visible using the jQuery Cycle plugin

Caution: PHP nested array alert - string offset out of bounds

NodeJS: Implementing external URL redirection functionality

Checking for the current loading status of a JavaScript file: How it's done

The fuse-sidebar elements are not being properly highlighted by Introjs

Error encountered while attempting to validate and add new entries

I am attempting to retrieve JSON data from bitbns.com, however I am encountering an issue

Use CSS specifically for codeigniter viewpage

Route Angular 4 application static resources to a /PORT directory rather than the primary domain

Invoke the ngrx component store's Effect in a synchronous manner