concat multiple 2 dimensional arrays with lodash

Question

I have multiple 2 dimensional arrays that I would like to concat into a single 2 dimensional array:

var data = [
  [["x"], ["value1"], ["value2"], ["valu3"]],
  [["data1"], [0], [1], [2]],
  [["data2"], [2], [1], [0]]
];

wanted result:

var result = [
  ["x", "data1", "data2"],
  ["value1", 0, 2],
  ["value2", 1, 1],
  ["value3", 2, 0]
];

So far I am try to zip and concat using apply but I can't have the result I want:

var data = [
  [["x"], ["value1"], ["value2"], ["valu3"]],
  [["data1"], [0], [1], [2]],
  [["data2"], [2], [1], [0]]
];

var result = _.zipWith.apply(_, _.concat(data))

console.log(result)

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>

@Nina Scholz he did in the snippet behind the variable `result` — Orelsanpls, Sep 27 '18 at 15:13

Orelsanpls · Answer 1 · 2018-09-27T15:17:43.490

3

What about using regular ES6 javascript ? :)

const data = [
  [
    ['x'],
    ['value1'],
    ['value2'],
    ['valu3'],
  ],
  [
    ['data1'],
    [0],
    [1],
    [2],
  ],
  [
    ['data2'],
    [2],
    [1],
    [0],
  ],
];

const ret = data.map(x => x.reduce((tmp, y) => [
  ...tmp,
  ...y,
], []));

console.log(ret);

And in ES5 as asked for

var data = [
  [
    ['x'],
    ['value1'],
    ['value2'],
    ['valu3'],
  ],
  [
    ['data1'],
    [0],
    [1],
    [2],
  ],
  [
    ['data2'],
    [2],
    [1],
    [0],
  ],
];

var result = [];

for (let i = 0; i < data.length; i += 1) {
  var oneArray = [];

  for (let j = 0; j < data[i].length; j += 1) {
    for (let k = 0; k < data[i][j].length; k += 1) {
      oneArray.push(data[i][j][k]);
    }
  }

  result.push(oneArray);
}

console.log(result);

edited Sep 27 '18 at 15:17

answered Sep 27 '18 at 15:12

Orelsanpls

22,456
6
42
69

@BelowtheRadar I've edited my post, hopes that's what you are looking for :) – Orelsanpls Sep 27 '18 at 15:18
1

Thanks a lot for the ES5 answer. I still have to support IE11 in my organization... :/ – Below the Radar Sep 27 '18 at 15:18
1

@BelowtheRadar I feel so sorry for you right now :<. Good luck! – Orelsanpls Sep 27 '18 at 15:19
I feel ashame, this is not the result I was looking for. There was an error in my wanted result in the question... – Below the Radar Sep 27 '18 at 15:28

score 2 · Answer 2 · answered Sep 27 '18 at 15:24

You could transpose the matrix.

var data = [[["x"], ["value1"], ["value2"], ["valu3"]], [["data1"], [0], [1], [2]], [["data2"], [2], [1], [0]]],
    result = data
        .reduce((r, a) => a.map(([v], i) => (r[i] || []).concat(v)), []);

console.log(result);

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

ES5

var data = [[["x"], ["value1"], ["value2"], ["valu3"]], [["data1"], [0], [1], [2]], [["data2"], [2], [1], [0]]],
    result = data.reduce(function (r, a) {
          return a.map(function (v, i) {
              return (r[i] || []).concat(v);
          });
    }, []);

console.log(result);

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

Akrion · Answer 3 · 2018-09-27T16:32:32.600

2

Concise solution with the use of ES6 destructuring and lodash _.zip, _.map & _.flatten:

var data = [[["x"], ["value1"], ["value2"], ["value3"]], [["data1"], [0], [1], [2]], [["data2"], [2], [1], [0]]]
    
var result = _.zip(..._.map(data, _.flatten))

console.log(result)

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>

edited Sep 27 '18 at 16:32

answered Sep 27 '18 at 16:25

Akrion

18,117
1
34
54

Koushik Chatterjee · Accepted Answer · 2019-03-18T11:57:29.457

Using lodash transposing the matrix is as simple as this:

_.zipWith(...data, _.concat)

var data = [
  [["x"], ["value1"], ["value2"], ["valu3"]],
  [["data1"], [0], [1], [2]],
  [["data2"], [2], [1], [0]]
]
var res = _.zipWith(...data, _.concat);

console.log(res);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

And also in Vanilla JS this is as simple as this

data[0].map((_,i)=>data.map(r=>r[i][0]))

var data = [
  [["x"], ["value1"], ["value2"], ["valu3"]],
  [["data1"], [0], [1], [2]],
  [["data2"], [2], [1], [0]]
];

var res = data[0].map((_,i)=>data.map(r=>r[i][0]));

console.log(res);

Note: You don't even need the _.concat and only _.zip would work (without 2nd argument) if your each rows were not nested, in your data rows are not [A, B, C, ...]. your rows are [[A], [B], [C], ...] but in output you need simple array for rows, so the _concat is used to make them simple array for each resultant row. Similarly in plain JS version the [0] in r[i][0] is needed because we have a nested level data in each row, otherwise (for simple row as input) it could have been r[i]

Can you add a working snippet with the data in the question? Then I'll accept your answer. — Below the Radar, Mar 18 '19 at 12:02
Here I have added working snippet in the answer with your data (provided in question). However, I haven't asked you to accept my answer, you should accept the best solution (whichever is) in order to help the community and users. — Koushik Chatterjee, Mar 18 '19 at 12:03

Ebuall · Answer 5 · 2018-09-27T15:39:06.347

1

What you want is called flatten. Lodash has 3 versions of that function.

const result = _.zip.apply(null, data).map(_.flatten)

edited Sep 27 '18 at 15:39

answered Sep 27 '18 at 15:16

Ebuall

1,306
1
12
14

1

sorry that's not the result I want – Below the Radar Sep 27 '18 at 15:17
@BelowtheRadar exactly the same as wanted result https://repl.it/repls/KindheartedDetailedSpools – Ebuall Sep 27 '18 at 15:20
1

Look carefully at the wanted result in the question – Below the Radar Sep 27 '18 at 15:21
@BelowtheRadar added zip – Ebuall Sep 27 '18 at 15:39
Thank you! That's the solution I was looking for! – Below the Radar Sep 27 '18 at 15:43

concat multiple 2 dimensional arrays with lodash

5 Answers5