Map 1D array to 2D associative array using WHILE LOOP with array.length - fails before length is 0

Javascript - I have a one dimensional array that I want to map into a 2 dimensional associative array ['name']['includes']['config']. I am using a while loop. There is probably a more elegant way, and would welcome that...

The problem I am having is that it is producing an error on index 2 of the associative array and loop iteration with id_array.length = 3 still remaining. I have included some test data. The loop works fine with a set of 3 or 6 item data in the one dimensional array, but when it gets to 9 or beyond, it fails. The data is always in multiples of 3.

The loop works with:

id_array = ["a0","b0","c0"];
id_array = ["a0","b0","c0","a1","b1", "c1"];

Fails with:

id_array = ["a0","b0","c0","a1","b1","c1","a2","b2","c2"];

Code below:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var id_array = ["a0", "b0", "c0", "a1", "b1", "c1", "a2", "b2", "c2"]; //fails with this set
console.log(id_array);
console.log(id_array.length);

//create associative array
var units_array = [
  [],
  []
]; //associative array
var value = ''; //content to push into associative array
var i = 0; //index of associative array
while (id_array.length) {
  console.log('id array length: ' + id_array.length);
  console.log('i: ' + i);
  value = id_array.shift() + "xx some other manipulated data";
  units_array[i]['name'] = value;

  console.log('id array length: ' + id_array.length);
  console.log('i: ' + i);
  value = id_array.shift() + "xx some other manipulated data";
  units_array[i]['includes'] = value;

  console.log('id array length: ' + id_array.length);
  console.log('i: ' + i);
  value = id_array.shift() + "xx some other manipulated data";
  units_array[i]['config'] = value;
  i = i + 1;
}

console.log(units_array);

<!-- end snippet -->

The console error message I get on the 3rd iteration is:

> Uncaught TypeError: Cannot set properties of undefined (setting 'name')

Console readout is:

properties.php:695 (9) ['a0', 'b0', 'c0', 'a1', 'b1', 'c1', 'a2', 'b2', 'c2']
0: "b2"
1: "c2"
length: 2[[Prototype]]: Array(0)

properties.php:696 9
properties.php:703 id array length: 9
properties.php:704 i: 0
properties.php:708 id array length: 8
properties.php:709 i: 0
properties.php:713 id array length: 7
properties.php:714 i: 0
properties.php:703 id array length: 6
properties.php:704 i: 1
properties.php:708 id array length: 5
properties.php:709 i: 1
properties.php:713 id array length: 4
properties.php:714 i: 1
properties.php:703 id array length: 3
properties.php:704 i: 2

I don't quite understand the console info below, why it shows 0:b2, 1:c2, length 2 (why 2?), but seems like that is where it stops at in the loop. But it does seem to recognize and show the 9 item array...

properties.php:695 (9) ['a0', 'b0', 'c0', 'a1', 'b1', 'c1', 'a2', 'b2', 'c2']
0: "b2"
1: "c2"
length: 2[[Prototype]]: Array(0)

Thanks in advance!

Initialize units_array like this:

var units_array = [];

Then at the top of the while loop:

   while (id_array.length) {
      console.log('id array length: ' + id_array.length);
      console.log('i: ' + i);
      units_array.push([]);
      // ...

That way every three elements you'll add a new sub-array to unit_array.

Because you're using property names that are not numeric, your sub-arrays in units_array won't work properly in a lot of situations (like JSON.stringify()). Instead, you can use objects:

let units_array = [];
while (id_array.length) {
  units_array.push({});
  // ...

That'll leave you with an array of objects. I would not use the term "associative array" for this, as units_array is a plain array with numeric indexes. JavaScript doesn't really have an associative array type. Objects and Map instances are close, but they're not intended to work like associative arrays in languages that expli