Using AngularJS, you can easily merge one array of data into another array

Question

Using AngularJS, you can easily merge one array of data into another array

In my coding environment, I am working with two arrays. The first array is called `$scope.workingSchedules` and it contains data related to working hours for different days of the week.

$scope.workingSchedules=[
                       {
                  workingDay:"MONDAY",
                  workingHours:[{fromTime:'1222',toTime:'1300'}]
                      },
                  workingDay:"MONDAY",
                  workingHours:[{fromTime:'1222',toTime:'1300'}]
                     ];

This array can store information for multiple days of the week. Additionally, I have another array named `$scope.workingTime` which has all days of the week listed with empty `workingHours` fields.

$scope.workingTime = [ 
        {   workingDay: 'MONDAY',
            workingHours: []
        },
        {   workingDay: 'TUESDAY',
            workingHours: []
        },
        {   workingDay: 'WEDNESDAY',
            workingHours: []
        },
        {   workingDay: 'THURSDAY',
            workingHours: []
        },
        {   workingDay: 'FRIDAY',
            workingHours: []
        },
        {   workingDay: 'SATURDAY',
            workingHours: []
        },
        {   workingDay: 'SUNDAY',
            workingHours: []
        }
     ];

My goal is to merge the data from the first array (`workingSchedules[]`) into the second array (`workingTime[]`) while keeping any days that are in the second array but not in the first array intact.

To achieve this, I have written the following code:

for(var i=0;i<$scope.workingTime[i].length;i++)
    {
        for (var j=0;j<$scope.workingSchedules[j].length;j++)
        {
          if($scope.workingTime[i].workingDay==$scope.workingSchedules[j].workingDay)
          {
            $scope.workingTime[i]=$scope.workingSchedules[j];

           }

        }
   }

Any assistance or suggestions on how to improve this code would be greatly appreciated. Thank you!

javascript arrays angularjs

Answer 1

Answer №1

There are a few issues here that need addressing. Firstly, your initial array is incorrect because you are attempting to insert key/value pairs into it. You should either declare it as an object or format all items within it as objects like this: {workingDay:"MONDAY"}, rather than workingDay:"MONDAY",.

Additionally, the way your loops are indexed is peculiar. Consider using i<$scope.workingTime.length instead of

i<$scope.workingTime[i].length

.

Answer 2

There are a few issues here that need addressing. Firstly, your initial array is incorrect because you are attempting to insert key/value pairs into it. You should either declare it as an object or format all items within it as objects like this: {workingDay:"MONDAY"}, rather than workingDay:"MONDAY",.

Additionally, the way your loops are indexed is peculiar. Consider using i<$scope.workingTime.length instead of

i<$scope.workingTime[i].length

.

Answer 3

Answer №2

When you perform the operation

$scope.workingTime[i]=$scope.workingSchedules[j];

, you are essentially replacing the existing value. It would be more appropriate to use .concat in order to merge the values.

Solution with duplicated entries

var data=[{workingDay:"MONDAY",workingHours:[]},{workingDay:"TUESDAY",workingHours:[]},{workingDay:"WEDNESDAY",workingHours:[]},{workingDay:"THURSDAY",workingHours:[]},{workingDay:"FRIDAY",workingHours:[]},{workingDay:"SATURDAY",workingHours:[]},{workingDay:"SUNDAY",workingHours:[]}]
var workingSchedules=[{workingDay:"MONDAY",workingHours:[{fromTime:"1222",toTime:"1300"}]},{workingDay:"MONDAY",workingHours:[{fromTime:"1222",toTime:"1300"}]}];

data.forEach(function(o) {
  var f = workingSchedules.filter(function(item) {
    return item.workingDay === o.workingDay;
  });
  if (f.length)
    o.workingHours = o.workingHours.concat(f.reduce(function(p, c) {
      return p.workingHours.concat(c.workingHours)
    }));
});

console.log(data)

Solution with distinct values

var data=[{workingDay:"MONDAY",workingHours:[]},{workingDay:"TUESDAY",workingHours:[]},{workingDay:"WEDNESDAY",workingHours:[]},{workingDay:"THURSDAY",workingHours:[]},{workingDay:"FRIDAY",workingHours:[]},{workingDay:"SATURDAY",workingHours:[]},{workingDay:"SUNDAY",workingHours:[]}];
var workingSchedules=[{workingDay:"MONDAY",workingHours:[{fromTime:"1222",toTime:"1300"}]},{workingDay:"MONDAY",workingHours:[{fromTime:"1222",toTime:"1300"}]},{workingDay:"MONDAY",workingHours:[{fromTime:"1400",toTime:"1700"}]}];

data.forEach(function(o) {
  var f = workingSchedules.filter(function(item) {
    return item.workingDay === o.workingDay;
  });
  if (f.length) {
    o.workingHours = o.workingHours.concat(f.reduce(function(p, c) {
      var exists = p.some(function(item) {
        return item.fromTime === c.workingHours[0].fromTime && item.toTime === c.workingHours[0].toTime;
      });
      return exists ? p : p.concat(c.workingHours);
    }, []));
  }
});

console.log(data)

Answer 4

When you perform the operation

$scope.workingTime[i]=$scope.workingSchedules[j];

, you are essentially replacing the existing value. It would be more appropriate to use .concat in order to merge the values.

Solution with duplicated entries

var data=[{workingDay:"MONDAY",workingHours:[]},{workingDay:"TUESDAY",workingHours:[]},{workingDay:"WEDNESDAY",workingHours:[]},{workingDay:"THURSDAY",workingHours:[]},{workingDay:"FRIDAY",workingHours:[]},{workingDay:"SATURDAY",workingHours:[]},{workingDay:"SUNDAY",workingHours:[]}]
var workingSchedules=[{workingDay:"MONDAY",workingHours:[{fromTime:"1222",toTime:"1300"}]},{workingDay:"MONDAY",workingHours:[{fromTime:"1222",toTime:"1300"}]}];

data.forEach(function(o) {
  var f = workingSchedules.filter(function(item) {
    return item.workingDay === o.workingDay;
  });
  if (f.length)
    o.workingHours = o.workingHours.concat(f.reduce(function(p, c) {
      return p.workingHours.concat(c.workingHours)
    }));
});

console.log(data)

Solution with distinct values

var data=[{workingDay:"MONDAY",workingHours:[]},{workingDay:"TUESDAY",workingHours:[]},{workingDay:"WEDNESDAY",workingHours:[]},{workingDay:"THURSDAY",workingHours:[]},{workingDay:"FRIDAY",workingHours:[]},{workingDay:"SATURDAY",workingHours:[]},{workingDay:"SUNDAY",workingHours:[]}];
var workingSchedules=[{workingDay:"MONDAY",workingHours:[{fromTime:"1222",toTime:"1300"}]},{workingDay:"MONDAY",workingHours:[{fromTime:"1222",toTime:"1300"}]},{workingDay:"MONDAY",workingHours:[{fromTime:"1400",toTime:"1700"}]}];

data.forEach(function(o) {
  var f = workingSchedules.filter(function(item) {
    return item.workingDay === o.workingDay;
  });
  if (f.length) {
    o.workingHours = o.workingHours.concat(f.reduce(function(p, c) {
      var exists = p.some(function(item) {
        return item.fromTime === c.workingHours[0].fromTime && item.toTime === c.workingHours[0].toTime;
      });
      return exists ? p : p.concat(c.workingHours);
    }, []));
  }
});

console.log(data)

Using AngularJS, you can easily merge one array of data into another array

Answer №1

Answer №2

Solution with duplicated entries

Solution with distinct values

Similar questions

I created a custom discord.js-commando command to announce all the channels that my bot is currently active in, however, encountered an unexpected error

Concatenating columns values from an array to lists of nested lists

Timer repeatedly triggered until nausea ensued (native v8natives.js:1582)

"Implementing x2js in your project on-the-fly with the help

MongoDB failing to enforce unique constraints on partial indexes

Enable the use of empty spaces in ag-grid filter bars

Asynchronous task during stream processing

The default value of the input color in HTML/NextJS does not update when changed

The Next.js error message reads: 'Issue with setting properties on undefined entity (specifically 'hook')'

A comprehensive guide on retrieving data from API across several pages

Locate the closing anchor tag following the image

How can one selectively apply a class to the initial DIV within a collection of dynamically generated DIV elements without relying on jQuery?

Having trouble getting Ajax post to function properly when using Contenteditable

Make sure to implement validations prior to sending back the observable in Angular

How can you stop a document event listener from triggering?

What is the best way to showcase a singular item from response.data?

Is there a way to create a JavaScript-driven search filter that updates automatically?

Sending an event to a component that has been rendered in Vue

The React engine is triggering an error stating "Module not found."

Displaying JSON data dynamically by iterating through it in a loop