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?

Answer 1

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> 

Answer 2

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

Answer 3

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

Answer 4

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 ] ]