Converting an object of arrays into array of arrays in Javascript

Question

object = {
          'AAA' : [1, 2, 3],
          'BBB' : [4, 5, 6]
      }

I have an object that looks like this but I need to convert it into an array of array that looks like:

arr = [['AAA', 'BBB'],
       [1, 4],
       [2, 5],
       [3, 6]]

To be pass-able to the excel library that I am using.

What is a good way to convert the format like that in Javascript?

See https://stackoverflow.com/questions/17428587/transposing-a-2d-array-in-javascript for how to transpose a 2D array. It should be pretty simple to adapt the solutions to an object containing arrays. — Barmar, Jul 06 '18 at 16:46

Nina Scholz · Accepted Answer · 2018-07-06T17:10:21.337

0

You could take the keys of the object and then take a nested approach for the outer iteration of the keys and for the inner iteration of the values.

Then assign a new array, if not given and take the index of the outer array for assigning the value. Later concat the result with the keys as first array.

var object = { AAA : [1, 2, 3], BBB : [4, 5, 6, 8] },
    keys = Object.keys(object),
    array = [keys].concat(keys.reduce((r, k, j) => {
        object[k].forEach((v, i) => (r[i] = r[i] || [])[j] = v);
        return r;
    }, []));
    
console.log(array);

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

edited Jul 06 '18 at 17:10

answered Jul 06 '18 at 16:49

Nina Scholz

376,160
25
347
392

what if I set one more item for `BBB`? Right now it seems like an additional `8` in `BBB` will append to the first element of the fourth array. – Dawn17 Jul 06 '18 at 17:07
i changed to assigning at an index instead of pushing the value. you might get sparse arrays who do not have the same length. – Nina Scholz Jul 06 '18 at 17:12

bh4r4th · Answer 2 · 2018-07-15T00:59:27.357

Solution for given scenario:

const objj = {
  'AAA' : [1, 2, 3],
  'BBB' : [4, 5, 6]
}

const getFormattedArray = (objJ) => {
  const formatted = []
  const keys = Object.keys(objJ)
  const values = Object.values(objJ)
  const [val1, val2] = [...values]
  formatted.push(keys)
  getFormattedChild(val1, val2).forEach(item => {
    formatted.push(item)
  })
  return formatted
}

const getFormattedChild = (a, b) => {
  let blob = []
  for (let i = 0; i < a.length; i++){
    let derp = []
    derp.push(a[i])
    derp.push(b[i])
    blob.push(derp)
  }
  return blob
}

const result = getFormattedArray(objj)
console.log('result: \n', result)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Solution, If AAA and BBB have different array values:

const objj = {
  'AAA' : [1, 2, 3, null],
  'BBB' : [4, 5, 6, 7, 8]
}

const getFormattedArray = (objJ) => {
  const formatted = []
  const keys = Object.keys(objJ)
  const values = Object.values(objJ)
  const [val1, val2] = [...values]
  formatted.push(keys)
  getFormattedChild(val1, val2).forEach(item => {
    formatted.push(item)
  })
  return formatted
}

const getFormattedChild = (a, b) => {
  let blob = []
  const aLength = a.length
  const bLength = b.length
  const upperLimit = (aLength <= bLength) ? bLength : aLength
  for (let i = 0; i < upperLimit; i++){
    let derp = []
    derp.push(a[i])
    derp.push(b[i])
    blob.push(derp)
  }
  return blob
}

const result = getFormattedArray(objj)
console.log('result: \n', result)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

score -1 · Answer 3 · answered Jul 06 '18 at 16:47

Here's a way to do it succinctly in one line, based on a solution here:

const arr = [Object.keys(object), Object.values(object)[0].map((col, i) => Object.values(object).map(row => row[i]))];

var object = {
          'AAA' : [1, 2, 3],
          'BBB' : [4, 5, 6]
      };
      
const arr = [Object.keys(object), Object.values(object)[0].map((col, i) => Object.values(object).map(row => row[i]))];

console.log(arr);

Avinash · Answer 4 · 2018-07-06T17:05:48.490

-1

var obj = {
          'AAA' : [1, 2, 3],
          'BBB' : [4, 5, 6]
      };

const result = [Object.keys(obj)];
result.concat(obj[Object.keys(obj)[0]].reduce((acc, ele, i)=>{
  acc.push([ele,obj[Object.keys(obj)[1]][i]]);
  return acc;
},[]));

Output:

[ [ 'AAA', 'BBB' ], [ 1, 4 ], [ 2, 5 ], [ 3, 6 ] ]

edited Jul 06 '18 at 17:05

answered Jul 06 '18 at 16:56

Avinash

1,245
11
19

Converting an object of arrays into array of arrays in Javascript

4 Answers4