Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ES6: Merge two arrays into an array of objects

I have two arrays that I want to merge together to one array of objects...

The first array is of dates (strings):

let metrodates = [
 "2008-01",
 "2008-02",
 "2008-03",..ect
];

The second array is of numbers:

let figures = [
 0,
 0.555,
 0.293,..ect
]

I want to merge them to make an object like this (so the array items match up by their similar index):

let metrodata = [
   {data: 0, date: "2008-01"},
   {data: 0.555, date: "2008-02"},
   {data: 0.293, date: "2008-03"},..ect
];

So far I do this like so: I create an empty array and then loop through one of the first two arrays to get the index number (the first two arrays are the same length)... But is there an easier way (in ES6)?

  let metrodata = [];

  for(let index in metrodates){
     metrodata.push({data: figures[index], date: metrodates[index]});
  }
like image 364
NewToJS Avatar asked Oct 23 '25 04:10

NewToJS


1 Answers

The easiest way is probably to use map and the index provided to the callback

let metrodates = [
  "2008-01",
  "2008-02",
  "2008-03"
];

let figures = [
  0,
  0.555,
  0.293
];

let output = metrodates.map((date,i) => ({date, data: figures[i]}));

console.log(output);

Another option is to make a generic zip function which collates your two input arrays into a single array. This is usually called a "zip" because it interlaces the inputs like teeth on a zipper.

const zip = ([x,...xs], [y,...ys]) => {
  if (x === undefined || y === undefined)
    return [];
  else
    return [[x,y], ...zip(xs, ys)];
}

let metrodates = [
  "2008-01",
  "2008-02",
  "2008-03"
];

let figures = [
  0,
  0.555,
  0.293
];

let output = zip(metrodates, figures).map(([date, data]) => ({date, data}));

console.log(output);

Another option is to make a generic map function which accepts more than one source array. The mapping function will receive one value from each source list. See Racket's map procedure for more examples of its use.

This answer might seem the most complicated but it is also the most versatile because it accepts any number of source array inputs.

const isEmpty = xs => xs.length === 0;
const head = ([x,...xs]) => x;
const tail = ([x,...xs]) => xs;

const map = (f, ...xxs) => {
  let loop = (acc, xxs) => {
    if (xxs.some(isEmpty))
      return acc;
    else
      return loop([...acc, f(...xxs.map(head))], xxs.map(tail));
  };
  return loop([], xxs);
}

let metrodates = [
  "2008-01",
  "2008-02",
  "2008-03"
];

let figures = [
  0,
  0.555,
  0.293
];

let output = map(
  (date, data) => ({date, data}),
  metrodates,
  figures
);

console.log(output);
like image 96
Mulan Avatar answered Oct 25 '25 04:10

Mulan



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!