JavaScript: Deconstructing an object with arrays, to an array that has objects

Question

I am having a hard time wrapping my head around how to do this. I have this object:

var objData = {
  _Input_396__REPEAT15_374:["Bedroom2", "Bedroom3", "Bedroom4"],
  _Input_396__REPEAT15_375:["1st", "2nd", "3rd"],
  _Input_396__REPEAT15_376:["122", "133", "144"],
  _Input_396__REPEAT15_377:["122", "133", "144"],
  _Input_396__REPEAT15_378:["Bamboo", "FloorNone", "Cork"]
};

the length of each array will be the same as the others in the object, however the length will change, so a length of 3 wont always be the length.

I need to deconstruct into this:

var arrData = [
  {
    _Input_396__REPEAT15_374:"Bedroom2",
    _Input_396__REPEAT15_375:"1st",
    _Input_396__REPEAT15_376:"122",
    _Input_396__REPEAT15_377:"122",
    _Input_396__REPEAT15_378:"Bamboo"
  },
  {
    _Input_396__REPEAT15_374:"Bedroom3",
    _Input_396__REPEAT15_375:"2nd",
    _Input_396__REPEAT15_376:"133",
    _Input_396__REPEAT15_377:"133",
    _Input_396__REPEAT15_378:"FloorNone"
  },
  {
    _Input_396__REPEAT15_374:"Bedroom4",
    _Input_396__REPEAT15_375:"3rd",
    _Input_396__REPEAT15_376:"144",
    _Input_396__REPEAT15_377:"144",
    _Input_396__REPEAT15_378:"Cork"
  }
];

What is the best way to achieve this?

Nina Scholz · Accepted Answer · 2016-11-28 08:51:04Z

8

You could iterate the keys of the object and then the arrays and build a new array with the all items.

Methods used

Object.keys for own properties of the object
Array#forEach for iterating a given array
Pattern x = x || defaultValue, test x for a truthy value and if not, then assign defaultValue to x.

var objData = { _Input_396__REPEAT15_374: ["Bedroom2", "Bedroom3", "Bedroom4"], _Input_396__REPEAT15_375: ["1st", "2nd", "3rd"], _Input_396__REPEAT15_376: ["122", "133", "144"], _Input_396__REPEAT15_377: ["122", "133", "144"], _Input_396__REPEAT15_378: ["Bamboo", "FloorNone", "Cork"] },
    arrData = [];

Object.keys(objData).forEach(function (k) {
    objData[k].forEach(function (a, i) {
        arrData[i] = arrData[i] || {};
        arrData[i][k] = a;
    });
});

console.log(arrData);

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

edited Nov 28, 2016 at 8:51

answered Nov 28, 2016 at 8:46

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

Comments

trincot · Accepted Answer · 2020-09-04 15:43:55Z

You could do it with this script, in a functional programming style, [edit:] using modern functions like Object.fromEntries and Object.entries:

var objData = {_Input_396__REPEAT15_374:["Bedroom2", "Bedroom3", "Bedroom4"],_Input_396__REPEAT15_375:["1st", "2nd", "3rd"],_Input_396__REPEAT15_376:["122", "133", "144"],_Input_396__REPEAT15_377:["122", "133", "144"],_Input_396__REPEAT15_378:["Bamboo", "FloorNone", "Cork"]};

var arrData = Object.values(objData)[0].map( (_, i) => 
    Object.fromEntries(Object.entries(objData).map( ([key, row]) => [key, row[i]] ))
);

console.log(arrData);

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

Limited to ES6 syntax, you could still do something similar:

var objData = {_Input_396__REPEAT15_374:["Bedroom2", "Bedroom3", "Bedroom4"],_Input_396__REPEAT15_375:["1st", "2nd", "3rd"],_Input_396__REPEAT15_376:["122", "133", "144"],_Input_396__REPEAT15_377:["122", "133", "144"],_Input_396__REPEAT15_378:["Bamboo", "FloorNone", "Cork"]};

var arrData = objData[Object.keys(objData)[0]].map( (_, i) => 
    Object.keys(objData).reduce( (acc, key) => (acc[key] = objData[key][i], acc), {} )
);

console.log(arrData);

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

Collectives™ on Stack Overflow

JavaScript: Deconstructing an object with arrays, to an array that has objects

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related