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/[email protected]/lodash.min.js"></script>

@Nina Scholz he did in the snippet behind the variable result — Orelsanpls
– Orelsanpls, Commented Sep 27, 2018 at 15:13

Orelsanpls · Accepted Answer · 2018-09-27 15:17:43Z

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, 2018 at 15:17

answered Sep 27, 2018 at 15:12

Orelsanpls

23.7k7 gold badges46 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Orelsanpls Over a year ago

@BelowtheRadar I've edited my post, hopes that's what you are looking for :)

Below the Radar Over a year ago

Thanks a lot for the ES5 answer. I still have to support IE11 in my organization... :/

Orelsanpls Over a year ago

@BelowtheRadar I feel so sorry for you right now :<. Good luck!

Below the Radar Over a year ago

I feel ashame, this is not the result I was looking for. There was an error in my wanted result in the question...

Koushik Chatterjee · Accepted Answer · 2019-03-18 11:57:29Z

2

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]

edited Mar 18, 2019 at 11:57

answered Sep 28, 2018 at 8:09

Koushik Chatterjee

4,1933 gold badges20 silver badges32 bronze badges

2 Comments

Below the Radar Over a year ago

Can you add a working snippet with the data in the question? Then I'll accept your answer.

Koushik Chatterjee Over a year ago

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.

Nina Scholz · Accepted Answer · 2018-09-27 15:24:02Z

2

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; }

answered Sep 27, 2018 at 15:24

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Comments

Akrion · Accepted Answer · 2018-09-27 16:32:32Z

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, 2018 at 16:32

answered Sep 27, 2018 at 16:25

Akrion

18.6k1 gold badge38 silver badges58 bronze badges

Comments

Ebuall · Accepted Answer · 2018-09-27 15:39:06Z

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, 2018 at 15:39

answered Sep 27, 2018 at 15:16

Ebuall

1,4461 gold badge14 silver badges15 bronze badges

5 Comments

Below the Radar Over a year ago

sorry that's not the result I want

Ebuall Over a year ago

@BelowtheRadar exactly the same as wanted result repl.it/repls/KindheartedDetailedSpools

Below the Radar Over a year ago

Look carefully at the wanted result in the question

Ebuall Over a year ago

@BelowtheRadar added zip

Below the Radar Over a year ago

Thank you! That's the solution I was looking for!

Collectives™ on Stack Overflow

concat multiple 2 dimensional arrays with lodash

5 Answers 5

4 Comments

2 Comments

Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

2 Comments

Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related