Array of 3 Dimensions to an Array of Objects

Question

Been stuck on this for a while.

let employees = [
 [
  ['firstName', 'Joe'],
  ['lastName', 'Blow'],
  ['age', 42],
  ['role', 'clerk']
 ],
 [
  ['firstName', 'Mary'],
  ['lastName', 'Jenkins'],
  ['age', 36],
  ['role', 'manager']
 ]
]

To yield:

[
    {firstName: 'Joe', lastName: 'Blow', age: 42, role: 'clerk'},
    {firstName: 'Mary', lastName: 'Jenkins', age: 36, role: 'manager'}
]

How do transform this exactly? I have tried triple nested for loops, map/reduce, and shift(), but I can't get it work transform exactly

Suren Srapyan · Accepted Answer · 2017-08-26 05:55:36Z

5

Try this solution. Use Array#map to iterate over first level items. In the map function iterate over nested array items via Array#forEach and populate your object. Then from map return that object.

let employees = [
 [
  ['firstName', 'Joe'],
  ['lastName', 'Blow'],
  ['age', 42],
  ['role', 'clerk']
 ],
 [
  ['firstName', 'Mary'],
  ['lastName', 'Jenkins'],
  ['age', 36],
  ['role', 'manager']
 ]
];

const newEmp = employees.map(emp => {
   const obj = {};
   
   emp.forEach(([prop, value]) => obj[prop] = value);
   
   return obj;
});

console.log(newEmp);

edited Aug 26, 2017 at 5:55

answered Aug 26, 2017 at 5:22

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

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

2 Comments

jhazelton1 Over a year ago

Wow I never thought to use [0] or [1], as it said the properties could be unpredictable. Thanks so much

Aadit M Shah Over a year ago

You could also change the forEach function to ([key, value]) => obj[key] = value.

Mohamed Abbas · Accepted Answer · 2017-08-26 05:33:24Z

4

You can use Array#map to loop over the outside/main array.

Then you can use Array#reduce to change every array inside the main array to object.

let employees = [
    [
        ['firstName', 'Joe'],
        ['lastName', 'Blow'],
        ['age', 42],
        ['role', 'clerk']
    ],
    [
        ['firstName', 'Mary'],
        ['lastName', 'Jenkins'],
        ['age', 36],
        ['role', 'manager']
    ]
];

employees = employees.map(employee => employee.reduce((acc, item) => {
    acc[item[0]] = item[1];
    return acc;
}, {}));

console.log(employees);

answered Aug 26, 2017 at 5:33

Mohamed Abbas

2,3081 gold badge14 silver badges19 bronze badges

6 Comments

Aadit M Shah Over a year ago

You could also change your inner function to (acc, [key, value]) => { acc[key] = value; return acc; }.

jhazelton1 Over a year ago

When I work with this, the first index returns as 'firstName', 'Joe' although the others return as lastName: 'Blow'

Mohamed Abbas Over a year ago

@AaditMShah Thanks for your note.

Mohamed Abbas Over a year ago

@jhazelton1 it works good for me. Also Did you try it in StackOverflow ? by clicking Run code snippet button.

jhazelton1 Over a year ago

@MohamedAbbas When I ran the code snippet, it worked in StackOverflow, so there must of been an error in my Atom text editor. Thanks

|

Aadit M Shah · Accepted Answer · 2017-08-26 06:03:47Z

This is what I would do:

const employees = [
    [
        ['firstName', 'Joe'],
        ['lastName', 'Blow'],
        ['age', 42],
        ['role', 'clerk']
    ],
    [
        ['firstName', 'Mary'],
        ['lastName', 'Jenkins'],
        ['age', 36],
        ['role', 'manager']
    ]
];

const entriesToObject = entries => {
    const object = {};
    for (const [key, value] of entries)
        object[key] = value;
    return object;
};

const result = employees.map(entriesToObject);

console.log(result);

Note that result can be converted back into employees by using Object.entries like so:

const result = [
    {
        firstName: 'Joe',
        lastName: 'Blow',
        age: 42,
        role: 'clerk'
    },
    {
        firstName: 'Mary',
        lastName: 'Jenkins',
        age: 36,
        role: 'manager'
    }
];

const employees = result.map(Object.entries);

console.log(employees);

Hence, the entriesToObject function is quite useful as it's the inverse function of Object.entries.

d512 · Accepted Answer · 2017-08-26 05:36:21Z

2

This seems to work:

let employees = [
    [
        ['firstName', 'Joe'],
        ['lastName', 'Blow'],
        ['age', 42],
        ['role', 'clerk']
    ],
    [
        ['firstName', 'Mary'],
        ['lastName', 'Jenkins'],
        ['age', 36],
        ['role', 'manager']
    ]
];

translated = []

for(let dataGroup of employees) {
    person = {};

    for(let dataPoint of dataGroup) {
        person[dataPoint[0]] = dataPoint[1]
    }

    translated.push(person);
}

console.log(translated);

answered Aug 26, 2017 at 5:36

d512

34.6k31 gold badges91 silver badges120 bronze badges

1 Comment

Aadit M Shah Over a year ago

You could also change your inner for loop to for (const [key, value] of dataGroup) person[key] = value;.

Nina Scholz · Accepted Answer · 2017-08-26 11:02:44Z

2

You could use a combination of

Array#map, for the complete new objects and the objects with just a key/value pair,
Object.assign, for creating a new object out of single/value pair objects as parameters,
spread syntax ..., for taking each element of an array as parameter,
destructuring assignment, for getting the key and value out of an array and
computed property names, for getting a dynamic key into an object literal.

employees.map(a => Object.assign(...a.map(([k, v]) => ({ [k]: v }))))
//        ^^^                         ^^^                              1 Array#map
//                 ^^^^^^^^^^^^^                                       2 Object.assign
//                               ^^^                                   3 spread syntax
//                                         ^^^^^^                      4 destructuring
//                                                       ^^^           5 computed prop

let employees = [[['firstName', 'Joe'], ['lastName', 'Blow'], ['age', 42], ['role', 'clerk']], [['firstName', 'Mary'], ['lastName', 'Jenkins'], ['age', 36], ['role', 'manager']]];
    result = employees.map(a => Object.assign(...a.map(([k, v]) => ({ [k]: v }))));
    
console.log(result);

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

edited Aug 26, 2017 at 11:02

answered Aug 26, 2017 at 7:28

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

1 Comment

Aadit M Shah Over a year ago

Using Object.assign along with the spread operator is really smart.

prasanth · Accepted Answer · 2017-08-26 06:12:39Z

0

For Different Approach do with Array#reduce and Array#forEach function

let employees = [
  [
    ['firstName', 'Joe'],
    ['lastName', 'Blow'],
    ['age', 42],
    ['role', 'clerk']
  ],
  [
    ['firstName', 'Mary'],
    ['lastName', 'Jenkins'],
    ['age', 36],
    ['role', 'manager']
  ]
]

var res = employees.reduce((a, b) => {
  var obj = {};
  b.forEach(function(i) {
    obj[i[0]] = i[1];
  })
  a.push(obj);
  return a;
}, [])

console.log(res)

edited Aug 26, 2017 at 6:12

answered Aug 26, 2017 at 5:32

prasanth

22.6k4 gold badges33 silver badges57 bronze badges

6 Comments

Aadit M Shah Over a year ago

Why don't you simply use map?

prasanth Over a year ago

Already many people post with map function.That why I was adding a different approach .And what wrong with my answer.Why downvote to my answer? @AaditMShah

Aadit M Shah Over a year ago

Using reduce over map unnecessarily complicates this problem. That being said, if you edit your answer and acknowledge that it's better to use map in this case then I'm willing to remove the downvote. I can't remove the downvote if you don't edit the answer.

prasanth Over a year ago

complicated answers also one of the answer.It's a learning platform people are getting all type of things And surely I won't edit my answer.i'm not begging for vote

Aadit M Shah Over a year ago

Sure, that's your prerogative. However, do note that I couldn't remove the downvote even if I wanted to because my vote is locked in. The only way I can remove it is if you edit your answer.

|

Collectives™ on Stack Overflow

Array of 3 Dimensions to an Array of Objects

6 Answers 6

2 Comments

6 Comments

Comments

1 Comment

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

6 Comments

Comments

1 Comment

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related