Post
Ask Question

Merge or Concat Key-Value Pairs Arrays using JQuery

JQuery and JavaScript have ready made functions like merge(), JavaScript concat(), extend() that can make your work easy to merge two arrays. But in this article we are going to discuss different scenario. Merge two arrays with key and value pairs. When we are merging two arrays with key and value pairs, we have to take care about two things. (1) if key matched, then value should be updated and (2) if key not found it would be added to base array.

We used .reduce function that makes operation fast to find matching keys.

Code of Conduct

  1. var array1 = [  
  2.     ["01/05/2015", 2],  
  3.     ["01/06/2015", 1],  
  4.     ["01/07/2015", 11],  
  5.     ["01/08/2015", 8],  
  6.     ["01/10/2015", 3]  
  7. ];  
  8. var array2 = [  
  9.     ["01/01/2015", 10],  
  10.     ["01/02/2015", 9],  
  11.     ["01/03/2015", 15],  
  12.     ["01/04/2015", 1],  
  13.     ["01/05/2015", 3],  
  14.     ["01/06/2015", 3]  
  15. ];  
  16. var result = array1.concat(array2)  
  17.     .reduce(function (ob, ar)  
  18.     {  
  19.         if (!(ar[0] in ob.nums))  
  20.         {  
  21.             ob.nums[ar[0]] = ar  
  22.             ob.result.push(ar)  
  23.         }  
  24.         else  
  25.         {  
  26.             ob.nums[ar[0]][1] += ar[1]  
  27.         }  
  28.         return ob  
  29.     },  
  30.     {  
  31.         nums:  
  32.         {},  
  33.         result: []  
  34.     })  
  35.     .result.sort(function (a, b)  
  36.     {  
  37.         return new Date(a[0]) - new Date(b[0]);  
  38.     });  
  39. $('body')  
  40.     .append(JSON.stringify(result));  
We take two array list which contains key as date and value as numeric. Both arrays have different key and value pairs. When we merge two arrays we have to keep in mind if date match then numeric value should be added to parent array, if not match then add new unmatched pair to array.

Example
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>Array Concat Example</title>  
  5.     <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>  
  6.     <script>  
  7.         $(function() {  
  8.             var array1 = [["01/05/2015", 2], ["01/06/2015", 1], ["01/07/2015", 11], ["01/08/2015", 8], ["01/10/2015", 3]];  
  9.             var array2 = [["01/01/2015", 10], ["01/02/2015", 9], ["01/03/2015", 15], ["01/04/2015", 1], ["01/05/2015", 3], ["01/06/2015", 3]];  
  10.             var result =  
  11.                 array1.concat(array2)  
  12.                     .reduce(function (ob, ar) {  
  13.                         if (!(ar[0] in ob.nums)) {  
  14.                             ob.nums[ar[0]] = ar  
  15.                             ob.result.push(ar)  
  16.                         } else {  
  17.                             ob.nums[ar[0]][1] += ar[1]  
  18.                         }  
  19.                         return ob  
  20.                     }, { nums: {}, result: [] }).result  
  21.                     .sort(function (a, b) {  
  22.                         return new Date(a[0]) - new Date(b[0]);  
  23.                     });  
  24.             $('body').append(JSON.stringify(result));  
  25.         });  
  26.     </script>  
  27. </head>  
  28. <body>  
  29. </body>  
  30. </html>  
Result

[["01/01/2015",10],["01/02/2015",9],["01/03/2015",15],["01/04/2015",1],["01/05/2015",5],["01/06/2015",4],["01/07/2015",11],["01/08/2015",8],["01/10/2015",3]]

You can see "01/01/2015" is not in array1 so it will add and "01/05/2015" exist in both arrays so new value should be the sum of both array values.