How to convert 2d array of arrays to array of objects using reduce in JavaScript?

Question

So I have an array of arrays which are rows in a table and I'd like to convert that to an array of objects. I have a columns array so I know what the keys will be, and of course the length is obviously the same. I know how to do this traditionally with a for loop, but was wondering how to do this with reduce or possible another more succinct way.

let columnArr = ["Name", "Group", "Tier"];

let twoDArryOfArrs = [
  ["Fred", "1FAKnock", "1a"],
  ["Brenda", "2GPvoge", "1a"],
  ["Francis", "67Gruz", "1a"],
  ["Arnold", "1FAKnock", "2b"],
  ["Candice", "67Gruz", "1a"],
  ["Larry", "1GTAFQT", "4a"],
  ["Tony", "2GPvoge", "2c"],
  ["Ronnie", "2GPvoge", "3a"]
];

function convert2dArryToArrOfObjects(arr2d, colArr) {
  let obj = {},
      resultArr = [];
  for (let i = 0; i < arr2d.length; i++) {
    let innerArr = arr2d[i];
    for (let j = 0; j < innerArr.length; j++) {
      obj[colArr[j]] = innerArr[j];
    }
    resultArr.push(obj);
    obj = {};
  }
  return resultArr;
}

const output = convert2dArryToArrOfObjects(twoDArryOfArrs, columnArr);

console.log(output);

Dacre Denny · Accepted Answer · 2020-05-17 23:58:01Z

One approach would be to nest a reduction inside of a reduction, where:

the outer reduction is concerned with obtaining the desired resultArr and
the inner reduction focuses on composing the "per-row" item object that matches columns to row values

As mentioned, the assumption is that the number of columns matches the number of row items in your input 2D array - with that in mind, the following solution should achieve what you require:

let columnArr = ["Name", "Group", "Tier"];

let twoDArryOfArrs = [
  ["Fred", "1FAKnock", "1a"],
  ["Brenda", "2GPvoge", "1a"],
  ["Francis", "67Gruz", "1a"],
  ["Arnold", "1FAKnock", "2b"],
  ["Candice", "67Gruz", "1a"],
  ["Larry", "1GTAFQT", "4a"],
  ["Tony", "2GPvoge", "2c"],
  ["Ronnie", "2GPvoge", "3a"]
];

// Cause the resulting array to be logged to console (for snippet)
console.log(twoDArryOfArrs.reduce((resultArr, row, idx) => {

  // Extract item object for result array from current row via
  // a nested reduction
  const item = columnArr.reduce((obj, col, jdx) => {

    // Compose the object by merging row value (at ordered jdx)
    // to "col" key of current column, into the resulting object
    // item
    return { ...obj,
      [col]: row[jdx]
    }

  }, {})

  //Append the composed item object to the current resultArr that
  // has been reduced
  return [...resultArr, item]
}, []))

Hope that helps!

Wael Fadhel · Accepted Answer · 2020-05-18 00:05:43Z

0

you can do it with map this way

let columnArr = ["Name", "Group", "Tier"];

let twoDArryOfArrs = [
  ["Fred", "1FAKnock", "1a"],
  ["Brenda", "2GPvoge", "1a"],
  ["Francis", "67Gruz", "1a"],
  ["Arnold", "1FAKnock", "2b"],
  ["Candice", "67Gruz", "1a"],
  ["Larry", "1GTAFQT", "4a"],
  ["Tony", "2GPvoge", "2c"],
  ["Ronnie", "2GPvoge", "3a"]
];

let arrayOfObj = twoDArryOfArrs.map( el => ({Name: el[0], Group: el[1], Tier:el[2]}))
console.log(arrayOfObj)

answered May 18, 2020 at 0:05

Wael Fadhel

1516 bronze badges

Comments

Levente Berky · Accepted Answer · 2020-05-18 00:09:26Z

0

You don't need reduce, just a simple map:

conv2 = (a2, cols) => a2.map(el => ({
  [cols[0]]: el[0],
  [cols[1]]: el[1],
  [cols[2]]: el[2]
}));

answered May 18, 2020 at 0:09

Levente Berky

544 bronze badges

Collectives™ on Stack Overflow

How to convert 2d array of arrays to array of objects using reduce in JavaScript?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related