Looping through nested arrays and converting to objects

Question

I want to convert an group of nested arrays into an array of objects with the collected information from the nested arrays:

BEFORE:

var employeeData = [
  [
    ['firstName', 'Bob'], ['lastName', 'Lob'], ['age', 22], ['role', 'salesperson']
  ],
  [
    ['firstName', 'Mary'], ['lastName', 'Joe'], ['age', 32], ['role', 'director']
  ]
]

AFTER:

[
  {firstName: 'Bob', lastName: 'Lob', age: 22, role: 'salesperson'},
  {firstName: 'Mary', lastName: 'Joe', age: 32, role: 'director'}
]

Here is the function I wrote to solve this but I can't quite see where the loop is going wrong:

    var employeeData = [
      [
        ['firstName', 'Bob'], ['lastName', 'Lob'], ['age', 22], ['role', 'salesperson']
      ],
      [
        ['firstName', 'Mary'], ['lastName', 'Joe'], ['age', 32], ['role', 'director']
      ]
    ]


    function transformData(employeeData) {
      let newObject = {};
      let newArr = [];
  
      for (var i = 0; i < employeeData.length; i++) { 
        for (var x = 0; x < employeeData[i].length; x++) { 
          for (var y = 0; y < employeeData[i][y].length; y++) { 
            newObject[employeeData[i][y][0]] = employeeData[i][y][1];
          } 
        }
        newArr.push(newObject);
        newObject = {};
      }
      return newArr;
    }
    
    console.log(transformData(employeeData));

Thanks in advance.

"I can't quite see where the loop is going wrong" I cannot either because I do not know what your code is producing. Can you give an example of what your output looks like now? — takendarkk
– takendarkk, Commented Dec 6, 2017 at 19:25
As you can see after editing the question to include a code snippet, the code does work, you are simply only working with the first two array elements and need to expand it to include all the data. — Scott Marcus
– Scott Marcus, Commented Dec 6, 2017 at 19:28

ibrahim mahrir · Accepted Answer · 2017-12-06 19:51:03Z

10

What's wrong with your code:

The third level for loop is messed up. It should be removed:

for (var y = 0; y < employeeData[i][x].length; y++) {
//                                  ^ by the way this should be x not y (not fixing the problem though)

because the third level arrays contain 2 elements that you need to use at the same time (as key-value), the for loop for them should be removed.

Fix:

for (var i = 0; i < employeeData.length; i++) { 
    for (var x = 0; x < employeeData[i].length; x++) { 
        newObject[employeeData[i][x][0]] = employeeData[i][x][1];
    }
    newArr.push(newObject);
    newObject = {};
}

Fixed code example:

var employeeData = [
  [
    ['firstName', 'Bob'], ['lastName', 'Lob'], ['age', 22], ['role', 'salesperson']
  ],
  [
    ['firstName', 'Mary'], ['lastName', 'Joe'], ['age', 32], ['role', 'director']
  ]
]


function transformData(employeeData) {
  let newObject = {};
  let newArr = [];

  for (var i = 0; i < employeeData.length; i++) { 
    for (var x = 0; x < employeeData[i].length; x++) { 
        newObject[employeeData[i][x][0]] = employeeData[i][x][1];
    }
    newArr.push(newObject);
    newObject = {};
  }
  return newArr;
}

console.log(transformData(employeeData));

Alternative solution:

You can map employeeData array into a new array, reduceing every sub-array into an object like this:

var result = employeeData.map(function(sub) {
    return sub.reduce(function(obj, pair) {
        obj[ pair[0] ] = pair[1];
        return obj;
    }, {});
});

Which can be shortened using ES6's arrow functions to:

let result = employeeData.map(sub => sub.reduce((obj, pair) => (obj[pair[0]] = pair[1], obj), {}));

Example:

let employeeData = [
  [
    ['firstName', 'Bob'], ['lastName', 'Lob'], ['age', 22], ['role', 'salesperson']
  ],
  [
    ['firstName', 'Mary'], ['lastName', 'Joe'], ['age', 32], ['role', 'director']
  ]
];

let result = employeeData.map(sub => sub.reduce((obj, pair) => (obj[pair[0]] = pair[1], obj), {}));

console.log(result);

edited Dec 6, 2017 at 19:51

answered Dec 6, 2017 at 19:28

ibrahim mahrir

31.8k5 gold badges50 silver badges78 bronze badges

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

8 Comments

ibrahim mahrir Over a year ago

@CarlEdwards MDN docs for the comma operator: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/….

Carl Edwards Over a year ago

Thanks. Never knew you could do something like this.

knox-flaneur Over a year ago

@ibrahimmahrir Thanks! To articulate the mistake in my reasoning, I think I saw each of the two elements (e.g., first and Bob) as something to "loop through" which means to work on individually. Only the second for loop was required since I want to work on those two key-value pairs as a set in one iteration, rather than each element ("first" and then "Bob") having its own iteration.

ibrahim mahrir Over a year ago

@knox-flaneur Usually but not necessarly all nested arrays need a map/reduce. It really depends on what you're trying to do with your data. Imagine a nested array like this: [ ["knox", "flaneur"], ["ibrahim", "mahrir"]] and you want to change to ["knox flaneur", "ibrahim mahrir"], then only map is used with join: àrr.map(sub => sub.join(" "));. If the array is [ [5, 6, 7], [1, 4, 2] ] and you want to transform it into [18, 7], then map/reduce is useful: arr.map( sub => sub.reduce((sum, n) => sum + n, 0) );. See? It really depends on your what you're trying to do with data

ibrahim mahrir Over a year ago

@knox-flaneur But I say in most cases map/reduce is used for nested arrays. You map elements of the array, and for each element you use reduce on them, which implies (they have something to do with arrays, either they are arrays, or they are some other kind of objects that contain arrays in them).

|

Ori Drori · Accepted Answer · 2019-01-16 18:35:49Z

How to fix your code

You only need 2 for loops: 1. iterate the array 2. iterate the sub arrays and construct the object

var employeeData = [[["firstName","Bob"],["lastName","Lob"],["age",22],["role","salesperson"]],[["firstName","Mary"],["lastName","Joe"],["age",32],["role","director"]]]

function transformData(employeeData) {
  let newObject;
  const newArr = [];

  for (var i = 0; i < employeeData.length; i++) {
    newObject = {}; // init new object
    for (var x = 0; x < employeeData[i].length; x++) {
        newObject[employeeData[i][x][0]] = employeeData[i][x][1]; // iterate inner arrays and assign properties to object
    }
    newArr.push(newObject);
  }
  return newArr;
}

console.log(transformData(employeeData));

Another option is to use a combination of Array#map to iterate the outer array and Array#reduce to construct an object from the inner arrays:

const employeeData = [[["firstName","Bob"],["lastName","Lob"],["age",22],["role","salesperson"]],[["firstName","Mary"],["lastName","Joe"],["age",32],["role","director"]]]

const result = employeeData.map((arr) => 
  arr.reduce((o, [key, value]) => (o[key] = value, o), {})
);

console.log(result);

TallChuck · Accepted Answer · 2017-12-06 19:41:57Z

2

The issue is your use of the variables x and y

For one thing, there's the line

for (var y = 0; y < employeeData[i][y].length; y++)

Perhaps you meant instead to use employeeData[i][x].length, because as you have it here, it is going to behave very strangely.

However, you can entirely eliminate the variable y if you replace it with x (which, in your implementation is never even used)

Here's my suggested edits to your function:

function transformData(employeeData) {
  let newObject = {}; 
  let newArr = []; 

  for (var i = 0; i < employeeData.length; i++) { 
    for (var x = 0; x < employeeData[i].length; x++) { 
      newObject[employeeData[i][x][0]] = employeeData[i][x][1];
    }   
    newArr.push(newObject);
    newObject = {}; 
  }
  return newArr;
}

Running your example with these changes I got correct output:

[
  {
    firstName: 'Bob',
    lastName: 'Lob',
    age: 22,
    role: 'salesperson'
  },
  {
    firstName: 'Mary',
    lastName: 'Joe',
    age: 32,
    role: 'director'
  }
]

edited Dec 6, 2017 at 19:41

answered Dec 6, 2017 at 19:32

TallChuck

2,01014 silver badges33 bronze badges

4 Comments

Scott Marcus Over a year ago

Actually, it's not. The code works just fine, it just doesn't go as deep into the nested arrays as needed.

TallChuck Over a year ago

@ScottMarcus that's because your y loop is using employeeData[i][y] instead of employeeData[i][x]

Scott Marcus Over a year ago

It's not my loops at all and your results and explanation are incorrect.

TallChuck Over a year ago

@ScottMarcus ah excuse me, yes, I accidentally had [i][y][0] where I should have had [i][y][1], it works correctly now if you would just give it a try

Omar Yafer · Accepted Answer · 2017-12-06 20:24:09Z

The problmem you face can be solved using for loops, as you were trying, if you use your indexes correctly. If you format your data as I did, you will see that there is three levels for your indexes your [i,x,y];

for example for employeeData[0] you should get:

[
    ['firstName', 'Bob'],
    ['lastName', 'Lob'],
    ['age', 22],
    ['role', 'salesperson']
  ]

then for employeeData[0][0] you should get:

 ['firstName', 'Bob']

and for employeeData[0][0][0] you should get: 'firstName'

To access 'Bob' you would need to employeeData[0][0][1] and since you know that there is only two elements in this inner array you don´t need to loop though it. as @TallChuck suggested great part of your problem stems from forgetting to use your x index.

var employeeData = [
  [
    ['firstName', 'Bob'],
    ['lastName', 'Lob'],
    ['age', 22],
    ['role', 'salesperson']
  ],
  [
    ['firstName', 'Mary'],
    ['lastName', 'Joe'],
    ['age', 32],
    ['role', 'director']
  ]
]


function transformData(employeeData) {
  let newObject = {};
  let newArr = [];

  for (var i = 0; i < employeeData.length; i++) {
    for (var x = 0; x < employeeData[i].length; x++) {
      newObject[employeeData[i][x][0]] = employeeData[i][x][1];
    }
    newArr.push(newObject);
    newObject = {};
  }
  return newArr;
}

console.log(transformData(employeeData));

EDIT

You could also make some more complex solutions if you pay attention to your indexes. Say you have the following data:

var employeeData = [
  [
    ['firstName', 'Bob', 'weight', '80kg'],
    ['lastName', 'Lob'],
    ['age', 22],
    ['role', 'salesperson']
  ],
  [
    ['firstName', 'Mary', 'eye color', 'green'],
    ['lastName', 'Joe'],
    ['age', 32],
    ['role', 'director']
  ]
]

Then the solution I gave before wouldn´t work directly. But if you look closely you will see that in some of the arrays your field names are located in the positions 0, 2 of the Y index. Which means that your field names are in a pair positions and the filed values in the odd positions. So you can actually make a loop through y and just check if the Y index is divisible by 2.

if(y % 2 == 0 ..){}

And do this only if there is an accompanying odd value thus

if(y % 2 == 0 && employeeData[i][x][y+1]){..}

The full code is below.

var employeeData = [
  [
    ['firstName', 'Bob', 'weight', '80kg'],
    ['lastName', 'Lob'],
    ['age', 22],
    ['role', 'salesperson']
  ],
  [
    ['firstName', 'Mary', 'eye color', 'green'],
    ['lastName', 'Joe'],
    ['age', 32],
    ['role', 'director']
  ]
]


function transformData(employeeData) {
  let newObject = {};
  let newArr = [];

  for (var i = 0; i < employeeData.length; i++) {
    for (var x = 0; x < employeeData[i].length; x++) {
      for (var y = 0; y < employeeData[i][x].length; y++) {
        if(y % 2 == 0 && employeeData[i][x][y+1]){
          newObject[employeeData[i][x][y]] = employeeData[i][x][y+1];
        }
      }
    }
    newArr.push(newObject);
    newObject = {};
  }
  return newArr;
}

console.log(transformData(employeeData));

Pila · Accepted Answer · 2021-10-20 14:13:06Z

1

This is quite easy to do in a single line. Javascript has a function just for this.

const employeeData = [
  [
    ['firstName', 'Bob'], ['lastName', 'Lob'], ['age', 22], ['role', 'salesperson']
  ],
  [
    ['firstName', 'Mary'], ['lastName', 'Joe'], ['age', 32], ['role', 'director']
  ]
]

const res = employeeData.map(data => Object.fromEntries(data))
console.log(res)

Cheers

answered Oct 20, 2021 at 14:13

Pila

5,9021 gold badge25 silver badges37 bronze badges

Comments

score 0 · Accepted Answer · 2017-12-06 19:40:14Z

0

You may just want to use a Map instead of an Object for each set of values in the outer array.

Then it's a very simple conversion of new Map(data);. Maps were added to the spec for these kinds of datasets.

var employeeData = [
  [['firstName', 'Bob'], ['lastName', 'Lob'], ['age', 22], ['role', 'salesperson']],
  [['firstName', 'Mary'], ['lastName', 'Joe'], ['age', 32], ['role', 'director']]
];

const res = employeeData.map(a => new Map(a));

for (const m of res) {
 console.log(m.get("firstName"));
}

But if you do ultimately want Object types in the array, then you can convert the each Map().

var employeeData = [
  [['firstName', 'Bob'], ['lastName', 'Lob'], ['age', 22], ['role', 'salesperson']],
  [['firstName', 'Mary'], ['lastName', 'Joe'], ['age', 32], ['role', 'director']]
];

const res = employeeData.map(a => new Map(a));

for (const m of res) {
 console.log(m.get("firstName"));
}

const oRes = res.map(m => Object.assign({}, ...Array.from(m.entries()).map(([k,v]) => ({[k]:v}))));

console.log(oRes);

edited Dec 6, 2017 at 19:40

answered Dec 6, 2017 at 19:31

user8897421

17 Comments

user8897421 Over a year ago

@ScottMarcus: You're right. I'll add further info to go from the Map to the Object as requested.

Scott Marcus Over a year ago

The question wasn't about map. The question was what's wrong with the loop that the OP is using. And, the answer is nothing. The OP just doesn't extract all the data that is available that's all.

user8897421 Over a year ago

@ScottMarcus: Yep, I know. I'm just offering an alternative that he may or may not decide to accept as a solution to his broken code. Other answers have handled the direct issue.

Scott Marcus Over a year ago

That's not what a good answer should do. Answer the question first, then offer alternatives.

user8897421 Over a year ago

@ScottMarcus: I don't think it would help the asker to try to squeeze all that into a comment. We are ultimately here to be helpful. This isn't a game show. It's real people with real problems, and different solutions to a problem can enhance a user's knowledge.

|

Mikyas Gami · Accepted Answer · 2018-09-07 23:48:37Z

0

This is a lot easier to accomplish with map and reduce

var employeeData = [
  [
   ['firstName', 'Bob'], ['lastName', 'Lob'], ['age', 22], ['role', 'salesperson']
   ],
  [
   ['firstName', 'Mary'], ['lastName', 'Joe'], ['age', 32], ['role', 'director']
  ]
  ]

var d = employeeData.map(
      x=>x.reduce((a,b)=>{a[b[0]]=b[1];return a;},{})
)


console.log(d)

answered Sep 7, 2018 at 23:48

Mikyas Gami

355 bronze badges

Comments

Scott Marcus · Accepted Answer · 2017-12-06 19:49:40Z

-1

Others have pointed out how the use of the map array function can simplify your task and those are good solutions (much better than counting loops), but they don't address the question you actually asked.

Your code actually works just fine, you just didn't extract all the data that was available to you. You only got the first and last name. By adding two more lines you can get the rest of the data. Also, and the second loop isn't even necessary (it's not hurting you, but it doesn't actually help because you never use the x counter anywhere).

var employeeData = [
      [
        ['firstName', 'Bob'], ['lastName', 'Lob'], ['age', 22], ['role', 'salesperson']
      ],
      [
        ['firstName', 'Mary'], ['lastName', 'Joe'], ['age', 32], ['role', 'director']
      ]
    ]


    function transformData(employeeData) {
      let newObject = {};
      let newArr = [];
  
      for (var i = 0; i < employeeData.length; i++) { 

          for (var y = 0; y < employeeData[i][y].length; y++) { 
            newObject[employeeData[i][y][0]] = employeeData[i][y][1];
            
            // Now you have to get the next two array elements as well:
            newObject[employeeData[i][y+1][0]] = employeeData[i][y+1][1];
            newObject[employeeData[i][y+2][0]] = employeeData[i][y+2][1];            
          } 
 
        newArr.push(newObject);
        newObject = {};
      }
      return newArr;
    }
    
    console.log(transformData(employeeData));

edited Dec 6, 2017 at 19:49

answered Dec 6, 2017 at 19:39

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

9 Comments

TallChuck Over a year ago

This is a very specifically tailored 'fix' that won't work with arrays of any size other than 4

Scott Marcus Over a year ago

@ibrahimmahrir Yes, I am. The second loop was unnecessary, but wasn't affecting the result. The third loop is right.

James Over a year ago

The main problem in the question is that for (var y = 0; y < employeeData[i][y].length; y++) doesn't produce a standard loop, rather it checks the length of each y instead of the level prior. Your answer doesn't address that, and in fact you have the same problem here too. Consider inside the second for loop using y < employeeData[i].length

TallChuck Over a year ago

@ScottMarcus you are not correcting his code, you are simply giving him an answer that happens to give the right solution in a single test case, but the reason your code works is not because it is correct, it is because you wrote it for the test case. If you used any example longer or shorter than the example he gave, it would not work, because your code does not address the issue

TallChuck Over a year ago

@ScottMarcus you didn't answer his question because you didn't address where the loop is going wrong

|

Collectives™ on Stack Overflow

Looping through nested arrays and converting to objects

8 Answers 8

8 Comments

Comments

4 Comments

Comments

Comments

17 Comments

Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

8 Comments

Comments

4 Comments

Comments

Comments

17 Comments

Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related