Merge two arrays based on date and sort them using Angular.js/JavaScript

Question

Merge two arrays based on date and sort them using Angular.js/JavaScript

I am facing a challenge where I have two JSON arrays, each containing a field named date. My goal is to compare the two arrays and merge them into a single array. Check out the code snippet below:

var firstArr=[{'name':'Ram','date':'2017-12-06'},{'name':'Raja','date':'2017-12-07'},{'name':'Rahul','date':'2017-12-08'}];

var secondArr=[{'model':'mmm','date':'2017-12-06'},{'model':'rrr','date':'2017-12-09'}];

In this scenario, I need to analyze both arrays based on their dates and combine their values into one unified array. The desired output should look like this:

var finalArr=[{'name':'Ram','date':'2017-12-06','model':'mmm'},{'name':'Raja','date':'2017-12-07','model':''},{'name':'Rahul','date':'2017-12-08','model':''},{'name':'','date':'2017-12-09','model':'rrr'}]

The expected outcome has been provided above. Currently, my attempt to achieve this looks like as follows.

angular.forEach(firstArr,function(obj1){
            angular.forEach(secondArr.task,function(obj2){
                if (new Date(obj1.date)=== new Date(obj2.date)) {

                }
            })
        })

However, I am encountering some confusion regarding the different lengths of the two arrays, as they may or may not be equal.

javascript arrays angularjs

Answer 1

Answer №1

My main focus is on the JavaScript part rather than the specific Angular version.

Approach

To merge objects based on a date string, you can create a hashMap where the date string acts as the property and the object as its corresponding value.
You can then utilize Object.assign for merging the objects. If that's not feasible, resorting to a for..in loop or employing two separate loops to manually set properties might be necessary.
Finally, iterate over this hashMap to gather the grouped objects.

Example:

var firstArr=[{'name':'Ram','date':'2017-12-06'},{'name':'Raja','date':'2017-12-07'},{'name':'Rahul','date':'2017-12-08'}];

var secondArr=[{'model':'mmm','date':'2017-12-06'},{'model':'rrr','date':'2017-12-09'}];

var hashMap = {};
[firstArr, secondArr].forEach(function(arr) {
  arr.forEach(function(obj) {
    hashMap[obj.date] = Object.assign(Object.create(null), hashMap[obj.date] || {}, obj);
  })
});

var result = Object.keys(hashMap).map(x=> hashMap[x]);
console.log(result)

Answer 2

My main focus is on the JavaScript part rather than the specific Angular version.

Approach

To merge objects based on a date string, you can create a hashMap where the date string acts as the property and the object as its corresponding value.
You can then utilize Object.assign for merging the objects. If that's not feasible, resorting to a for..in loop or employing two separate loops to manually set properties might be necessary.
Finally, iterate over this hashMap to gather the grouped objects.

Example:

var firstArr=[{'name':'Ram','date':'2017-12-06'},{'name':'Raja','date':'2017-12-07'},{'name':'Rahul','date':'2017-12-08'}];

var secondArr=[{'model':'mmm','date':'2017-12-06'},{'model':'rrr','date':'2017-12-09'}];

var hashMap = {};
[firstArr, secondArr].forEach(function(arr) {
  arr.forEach(function(obj) {
    hashMap[obj.date] = Object.assign(Object.create(null), hashMap[obj.date] || {}, obj);
  })
});

var result = Object.keys(hashMap).map(x=> hashMap[x]);
console.log(result)

Answer 3

Answer №2

To combine objects with the same date, you can utilize the array#reduce method. Within the array#reduce function, merge objects that share the same date and extract all values using Object.values().

var firstArray=[{'name':'Alice','date':'2018-02-15'},{'name':'Bob','date':'2018-02-16'},{'name':'Charlie','date':'2018-02-17'}],
    secondArray=[{'color':'red','date':'2018-02-15'},{'color':'blue','date':'2018-02-18'}];

var mergedResult = firstArray.concat(secondArray).reduce((accumulator, obj) => {
  accumulator[obj.date] = Object.assign({}, accumulator[obj.date] || {name:'', color: ''}, obj);
  return accumulator;
},{});

var finalOutput = Object.values(mergedResult);
console.log(finalOutput);

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

Answer 4

To combine objects with the same date, you can utilize the array#reduce method. Within the array#reduce function, merge objects that share the same date and extract all values using Object.values().

var firstArray=[{'name':'Alice','date':'2018-02-15'},{'name':'Bob','date':'2018-02-16'},{'name':'Charlie','date':'2018-02-17'}],
    secondArray=[{'color':'red','date':'2018-02-15'},{'color':'blue','date':'2018-02-18'}];

var mergedResult = firstArray.concat(secondArray).reduce((accumulator, obj) => {
  accumulator[obj.date] = Object.assign({}, accumulator[obj.date] || {name:'', color: ''}, obj);
  return accumulator;
},{});

var finalOutput = Object.values(mergedResult);
console.log(finalOutput);

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

Answer 5

Answer №3

Give this a shot:

let finalArray = [];
angular.forEach(firstArray, function(value) {
    angular.forEach(secondArray, function(element) {
        if (value.date === element.date) {
            finalArray.push({ name: value.name, date: value.date, model: element.model });
        }
    });
});

Answer 6

Give this a shot:

let finalArray = [];
angular.forEach(firstArray, function(value) {
    angular.forEach(secondArray, function(element) {
        if (value.date === element.date) {
            finalArray.push({ name: value.name, date: value.date, model: element.model });
        }
    });
});

Answer 7

Answer №4

Give this a try. If you wish to keep the original arrays intact, you'll need to create deep clones of them beforehand. Unlike Edison's approach, this method will also incorporate items from the second array.

var firstArr=[{'name':'Ram','date':'2017-12-06'},{'name':'Raja','date':'2017-12-07'},{'name':'Rahul','date':'2017-12-08' }];

var secondArr=[{'model':'mmm','date':'2017-12-06'},{'model':'rrr','date':'2017-12-09' }];

const newArr = (arr1, arr2) => {
  const finalArr = arr1.map((firstElement) => {
    firstElement.model = "";
    arr2.forEach((secondElement, index) => {
      if (secondElement.date === firstElement.date) {
        firstElement.model = secondElement.model;
        arr2.splice(index, 1);
       }
    });
    return firstElement;
  });
  arr2.forEach((element) => {
    element.name = "";
    finalArr.push(element);
  });
  return finalArr;
};

console.log(newArr(firstArr, secondArr));

Answer 8

Give this a try. If you wish to keep the original arrays intact, you'll need to create deep clones of them beforehand. Unlike Edison's approach, this method will also incorporate items from the second array.

var firstArr=[{'name':'Ram','date':'2017-12-06'},{'name':'Raja','date':'2017-12-07'},{'name':'Rahul','date':'2017-12-08' }];

var secondArr=[{'model':'mmm','date':'2017-12-06'},{'model':'rrr','date':'2017-12-09' }];

const newArr = (arr1, arr2) => {
  const finalArr = arr1.map((firstElement) => {
    firstElement.model = "";
    arr2.forEach((secondElement, index) => {
      if (secondElement.date === firstElement.date) {
        firstElement.model = secondElement.model;
        arr2.splice(index, 1);
       }
    });
    return firstElement;
  });
  arr2.forEach((element) => {
    element.name = "";
    finalArr.push(element);
  });
  return finalArr;
};

console.log(newArr(firstArr, secondArr));

Answer 9

Answer №5

Angular is a robust framework with a vast library, but it only requires the correct syntax in the view to get started.

This example worked flawlessly without any coding in the controller:

var app = angular.module("app", []);

app.controller("ctrlA", function($scope) {
  var firstArr = [{
    'name': 'Ram',
    'date': '2017-12-06'
  }, {
    'name': 'Raja',
    'date': '2017-12-07'
  }, {
    'name': 'Rahul',
    'date': '2017-12-08'
  }];

  var secondArr = [{
    'model': 'mmm',
    'date': '2017-12-06'
  }, {
    'model': 'rrr',
    'date': '2017-12-09'
  }];

  $scope.ul = firstArr.concat(secondArr);

})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrlA">
  <ul>
    <li ng-repeat="li in ul | orderBy:'date'">
      {{li.name ? li.name : li.model}} - {{li.date}}
    </li>
  </ul>
</div>

Answer 10

Angular is a robust framework with a vast library, but it only requires the correct syntax in the view to get started.

This example worked flawlessly without any coding in the controller:

var app = angular.module("app", []);

app.controller("ctrlA", function($scope) {
  var firstArr = [{
    'name': 'Ram',
    'date': '2017-12-06'
  }, {
    'name': 'Raja',
    'date': '2017-12-07'
  }, {
    'name': 'Rahul',
    'date': '2017-12-08'
  }];

  var secondArr = [{
    'model': 'mmm',
    'date': '2017-12-06'
  }, {
    'model': 'rrr',
    'date': '2017-12-09'
  }];

  $scope.ul = firstArr.concat(secondArr);

})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrlA">
  <ul>
    <li ng-repeat="li in ul | orderBy:'date'">
      {{li.name ? li.name : li.model}} - {{li.date}}
    </li>
  </ul>
</div>

Merge two arrays based on date and sort them using Angular.js/JavaScript

Answer №1

Approach

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Displaying a loading spinner image as PHP script runs

Issue with the transmission of FormData and string data to PHP

Guide to setting up parameterized routes in GatsbyJS

Transferring JSON data using DWR (Direct Web Remoting)

Securing paths in NuxtJS

I am unable to send back my JSON object

Condensed conditional statement in PHP Arrays

Modifying an onClick handler function within a react element located in a node module, which points to a function in a prop declared in the main Component file

Enhancing Website Interactivity with PHP, AJAX, and

Retrieve an array of items from the Firebase snapshot

Sending input values from textboxes to the Controller

A Fresh Approach for Generating Unique UUIDs without Bitwise Operators

Sorting an array of elements in JavaScript based on their value relationships

Enhancing numbers by incorporating different digits

"Unraveling the Mystery of jQuery In

Struggling with retrieving data from a file in Angular service while using node-webkit. Unable to make it functional

ExpressJs does not support query parameters with the router.get method

Dividing a JSON string and incorporating them into individual tds using AngularJS

What is the method to disable response validation for image endpoints in Swagger API?

Initiate an Ajax request from a hyperlink