Merging of Two Array in React Native/Javascript

Question

I have an Array lets say

arr1 =  [ 
{date: "June 27", data: ["dummyone","dummy2",...]},
{date: "June 24", data: ["dummyone","dummy2",...]},
{date: "June 18", data: ["dummyone","dummy2",...]},
{date: "June 14", data: ["dummyone","dummy2",...]}
]

arr2 = [ 
{date: "June 14", data: ["dummy3","dummy4",...]},
{date: "June 12", data: ["dummy3","dummy4",...]},
{date: "June 10", data: ["dummy3","dummy4",...]},
{date: "June 09", data: ["dummy3","dummy4",...]}
]

So my final array should be

[ 
{date: "June 27", data: ["dummyone","dummy2",...]},
{date: "June 24", data: ["dummyone","dummy2",...]},
{date: "June 18", data: ["dummyone","dummy2",...]},
{date: "June 14", data: ["dummyone","dummy2","dummy3","dummy4",...]},
{date: "June 12", data: ["dummy3","dummy4",...]},
{date: "June 10", data: ["dummy3","dummy4",...]},
{date: "June 09", data: ["dummy3","dummy4",...]}
]

I have tried merging the array for "June 14" date, also tried using spread operator like (lastDateLoaded has "June 14" as value)

arr2.forEach(activitiesTempData => {
         if(lastDateLoaded === activitiesTempData.date){

             arr1[lastDateIndex].data = [...arr1[lastDateIndex].data, ...activitiesTempData.data];

         }else{
           arr1 = [...arr1, arr2];
         }
    })

score 1 · Answer 1 · answered Jun 28 '19 at 07:32

1

You can do something like this:

arr1 =  [ 
  {date: "June 27", data: ["dummyone","dummy2"]},
  {date: "June 24", data: ["dummyone","dummy2"]},
  {date: "June 18", data: ["dummyone","dummy2"]},
  {date: "June 14", data: ["dummyone","dummy2"]}
]

arr2 = [ 
  {date: "June 14", data: ["dummy3","dummy4"]},
  {date: "June 12", data: ["dummy3","dummy4"]},
  {date: "June 10", data: ["dummy3","dummy4"]},
  {date: "June 09", data: ["dummy3","dummy4"]}
]

const result = [...arr1, ...arr2].reduce((a, c) => {
  let found = a.find(({ date }) => date === c.date);
  if (found) {
    found.data = [...found.data, ...c.data];
  } else {
    a.push(c);
  }
  return a;
}, []);

console.log(result);

answered Jun 28 '19 at 07:32

Titus

22,031
1
23
33

thanks for the answer, but it didnt worked. I am getting only two values in data for "June 14" date. – Arvindlal Jaiswal Jun 28 '19 at 07:49
@ArvindlalJaiswal, that's strange, the code snippet seems to run the expected result. Also tried it on my own console. – Chris Ngo Jun 28 '19 at 07:50
@ArvindlalJaiswal The important part is to merge the two arrays `[...arr1, ...arr2]` and reduce the resulting array. – Titus Jun 28 '19 at 07:51
Sorry @Titus and Christopher Ngo, it worked on console, but for my code it isn't working. will check my code once again and will get back. But thanks for your response – Arvindlal Jaiswal Jun 28 '19 at 08:00

score 1 · Answer 2 · answered Jun 28 '19 at 07:33

Concat the arrays (or use array spread), and reduce them to a an object using the date as the key. Collect the data into the array at the relevant date key. Convert back to an object with Object.values():

const arr1 =  [{"date":"June 27","data":["dummyone","dummy2"]},{"date":"June 24","data":["dummyone","dummy2"]},{"date":"June 18","data":["dummyone","dummy2"]},{"date":"June 14","data":["dummyone","dummy2"]}]
const arr2 = [{"date":"June 14","data":["dummy3","dummy4"]},{"date":"June 12","data":["dummy3","dummy4"]},{"date":"June 10","data":["dummy3","dummy4"]},{"date":"June 09","data":["dummy3","dummy4"]}]

const result = Object.values([...arr1, ...arr2]
  .reduce((r, o) => {
    r[o.date] = r[o.date] ?
      { ...r[o.date], data: [...r[o.date].data, ...o.data] }
      :
      o
    
    return r
  }, {}))
  
console.log(result)

ellipsis · Answer 3 · 2019-06-28T08:05:32.587

1

Use a forEach ,filter and concat together to filter out the duplicate values

var arr1 =  [ 
{date: "June 27", data: ["dummyone","dummy2"]},
{date: "June 24", data: ["dummyone","dummy2"]},
{date: "June 18", data: ["dummyone","dummy2"]},
{date: "June 14", data: ["dummyone","dummy2"]}
]

var arr2 = [ 
{date: "June 14", data: ["dummy3","dummy4"]},
{date: "June 12", data: ["dummy3","dummy4"]},
{date: "June 10", data: ["dummy3","dummy4"]},
{date: "June 09", data: ["dummy3","dummy4"]}
]
arr2.forEach(function(e) {
var arr=arr1.filter(function(r,j) {
      return r.date == e.date;
    })
  arr.length == 0?arr1.push(e): arr1[arr1.indexOf(arr[0])].data=arr1[arr1.indexOf(arr[0])].data.concat(e.data)  
})
console.log(arr1)

edited Jun 28 '19 at 08:05

answered Jun 28 '19 at 07:39

ellipsis

12,049
2
17
33

I think the OP wants to merge the `data` arrays of duplicates not just remove them. Also, in this cases (checkin if the array contains some kind of element), it is better to use `.some` instead of `.filter`. – Titus Jun 28 '19 at 07:54
Fiexd it @Titus – ellipsis Jun 28 '19 at 08:07

score 1 · Answer 4 · answered Jun 28 '19 at 07:41

We can merge two array using concat() method like this

  let arr1 =  [ 
{date: "June 27", data: ["dummyone","dummy2"]},
{date: "June 24", data: ["dummyone","dummy2"]},
{date: "June 18", data: ["dummyone","dummy2"]},
{date: "June 14", data: ["dummyone","dummy2"]}
]

let arr2 = [ 
{date: "June 14", data: ["dummy3","dummy4"]},
{date: "June 12", data: ["dummy3","dummy4"]},
{date: "June 10", data: ["dummy3","dummy4"]},
{date: "June 09", data: ["dummy3","dummy4"]}
]

console.log(arr1.concat(arr2));

This will print a merged array of these two array. Now after that if you want to remove duplicates record than you should use lodash library or other method of javascript like filter(), reduce() etc.

score 1 · Answer 5 · answered Jun 28 '19 at 07:43

1

Are you looking for combining arr1 and arr2? If so, try this

    var arr3 = arr1.concat(arr2)
    console.log(arr3)

answered Jun 28 '19 at 07:43

R.Wedisa

99
8

score 0 · Answer 6 · answered Jun 28 '19 at 07:36

You could graoup with a Map and get the grouped data in the wanted format.

var arr1 = [{ date: "June 27", data: ["dummyone", "dummy2"] }, { date: "June 24", data: ["dummyone", "dummy2"] }, { date: "June 18", data: ["dummyone", "dummy2"] }, { date: "June 14", data: ["dummyone", "dummy2"] }],
    arr2 = [{ date: "June 14", data: ["dummy3", "dummy4"] }, { date: "June 12", data: ["dummy3", "dummy4"] }, { date: "June 10", data: ["dummy3", "dummy4"] }, { date: "June 09", data: ["dummy3", "dummy4"] }],
    result = Array.from(
        [...arr1, ...arr2].reduce(
            (m, { date, data }) => m.set(date, [...(m.get(date) || []), ...data]),
            new Map
        ),
        ([date, data]) => ({ date, data })
    );

console.log(result);

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

Merging of Two Array in React Native/Javascript

6 Answers6