Merging two arrays of dictionaries in javascript

Question

I have two arrays of dictionaries that look something like this:

var lat = [{key:"2017-09-20T11:51:32.000Z", value:50.7825333},{key:"2017-09-20T11:51:33.000Z", value:50.7826},...];
var lon = [{key:"2017-09-20T11:51:32.000Z", value:-1.3075833},{key:"2017-09-20T11:51:33.000Z", value:-1.3076},...];

You may have guessed that this is an array of latitudes and one of longitudes!

I would like an elegant way to merge time, lat, lon into one array. Both arrays contain the same keys (I have to check that this is always the case!).

var latLon = [{time:"2017-09-20T11:51:32.000Z", lat:50.7825333, lon:-1.3075833},...]

I chose something collaborative that works, but not very (i.e., iterate over both arrays and add to a new one), but it looks like there should be a more stylish way for Object.assign to use some nice lams. I also use the D3.js library if it contains useful methods.

Answer 1

Array#map ( ).

var lat = [{key:"2017-09-20T11:51:32.000Z", value:50.7825333},{key:"2017-09-20T11:51:33.000Z", value:50.7826}];
var lon = [{key:"2017-09-20T11:51:32.000Z", value:-1.3075833},{key:"2017-09-20T11:51:33.000Z", value:-1.3076}];


var res = lat
  // iterate over the first array
  .map(function(o, i) {
    // generate the array element
    // where get values from element and
    // get value from second array using
    // the index
    return {
      time: o.key,
      lat: o.value,
      lon: lon[i].value
    }
  })

console.log(res);

// with ES6 arrow function
var res1 = lat.map((o, i) => ({time: o.key, lat: o.value, lon: lon[i].value}))


console.log(res1);

Hide result

---

FYI: , , , ( Array#find), - .

Array#find :

var lat = [{key:"2017-09-20T11:51:32.000Z", value:50.7825333},{key:"2017-09-20T11:51:33.000Z", value:50.7826}];
var lon = [{key:"2017-09-20T11:51:32.000Z", value:-1.3075833},{key:"2017-09-20T11:51:33.000Z", value:-1.3076}];



var res = lat
  .map(function(o) {
    return {
      time: o.key,
      lat: o.value,
      // get object by using find method
      lon: lon.find(function(o1) {
        return o1.key === o.key;
      }).value
    }
  })

console.log(res);

// with ES6 arrow function
var res1 = lat.map(o => ({
  time: o.key,
  lat: o.value,
  lon: lon.find(o1 => o1.key === o.key).value
}))

console.log(res1);

Hide result

- :

var lat = [{key:"2017-09-20T11:51:32.000Z", value:50.7825333},{key:"2017-09-20T11:51:33.000Z", value:50.7826}];
var lon = [{key:"2017-09-20T11:51:32.000Z", value:-1.3075833},{key:"2017-09-20T11:51:33.000Z", value:-1.3076}];

// generate reference hashmap for getting 
// value using the datetime string
var ref = lon.reduce(function(obj, o) {
  // set reference
  obj[o.key] = o.value;
  // return the reference object
  return obj;
  // set initial value as an empty object
}, {});

var res = lat
  .map(function(o) {
    return {
      time: o.key,
      lat: o.value,
      // get value from generated reference object
      lon: ref[o.key]
    }
  })

console.log(res);

Hide result

Answer 2

find(), - , . find() lat, .

map reduce, .

lat lon .

var lat = [{key:"2017-09-20T11:51:32.000Z", value:50.7825333},{key:"2017-09-20T11:51:33.000Z", value:50.7826}];
var lon = [{key:"2017-09-20T11:51:32.000Z", value:-1.3075833},{key:"2017-09-20T11:51:33.000Z", value:-1.3076}];

var obj = lat.reduce((a, c) => (a[c.key] = {time: c.key, lat:c.value}, a), {});
var arr = lon.map(lon => Object.assign(obj[lon.key], {lon: lon.value}));

console.log(arr);

Hide result

Answer 3

It is based on time key. Assuming there are no keys / times, then you can do this:

var lat = [{key:"2017-09-20T11:51:32.000Z", value:50.7825333},{key:"2017-09-20T11:51:33.000Z", value:50.7826}];
var lon = [{key:"2017-09-20T11:51:32.000Z", value:-1.3075833},{key:"2017-09-20T11:51:33.000Z", value:-1.3076}];

var obj = {}, arr = lat.concat(lon);

arr.forEach(function(x){
    obj[x.key] ? obj[x.key]["lon"] = x.value : obj[x.key] = {lat: x.value, time: x.key};
});

var latlon = Object.keys(obj).map(function(x){
    return obj[x];
});

You combine 2 arrays to create one array. Then you create a dictionary using time as a key (here it assumes that you do not have two lats and two lengths with the same times). Since you know that you are getting lats for the first time, your next key match should be Lons.