Setting up object key-value pairs via array iteration

Question

I am trying to create the following array by using for loop. However, my result is an array with the length of 24 and all objects inside become { key: '23', text: '12:30', value: '12:30' }, rather than iterating one by one. Can anyone explain to me why each iteration would override the previous one?

const timeOptions = [
  { key: '0', text: '1:00', value: '1:00' },
  { key: '1', text: '1:30', value: '1:30' },
  { key: '2', text: '2:00', value: '2:00' },
  { key: '3', text: '2:30', value: '2:30' },
  { key: '4', text: '3:00', value: '3:00' },
  { key: '5', text: '3:30', value: '3:30' },
  { key: '6', text: '4:00', value: '4:00' },
  { key: '7', text: '4:30', value: '4:30' },
  { key: '8', text: '5:00', value: '5:00' },
  { key: '9', text: '5:30', value: '5:30' },
  { key: '10', text: '6:00', value: '6:00' },
  { key: '11', text: '6:30', value: '6:30' },
  { key: '12', text: '7:00', value: '7:00' },
  { key: '13', text: '7:30', value: '7:30' },
  { key: '14', text: '8:00', value: '8:00' },
  { key: '15', text: '8:30', value: '8:30' },
  { key: '16', text: '9:00', value: '9:00' },
  { key: '17', text: '9:30', value: '9:30' },
  { key: '18', text: '10:00', value: '10:00' },
  { key: '19', text: '10:30', value: '10:30' },
  { key: '20', text: '11:00', value: '11:00' },
  { key: '21', text: '11:30', value: '11:30' },
  { key: '22', text: '12:00', value: '12:00' },
  { key: '23', text: '12:30', value: '12:30' },
];

This is the function I wrote:

var array = Array(24).fill({});
array[0] = { key: '0', text: '1:00', value: '1:00' };

function transform(arr) {
  for (var i = 0; i < arr.length; i++) {
    arr[i].key = i.toString();
    if (i % 2 === 0 && i !== 0) {
      arr[i].text = Number(arr[i - 2].text.split(':')[0]) + 1 + ':00';
      arr[i].value = arr[i].text;
    } else if (i % 2 !== 0) {
      arr[i].text = arr[i - 1].text.split(':')[0] + ':30';
      arr[i].value = arr[i].text;
    }
  }
  return arr;
}

transform(array);

Answer 1

Your issue is with the very first line:

var array = Array(24).fill({});

Essentially you’re saying create an array with a bunch of the same empty objects. So, when you change one, it will change all the others. You can think of this as each index in your array is pointing to the same memory location which is storing that empty object {}.

A quick fix to this is to manually fill your array using a for loop. Take a look at the code snippet for a working example:

var array = [];
for(var i = 0; i < 24; i++) {
  array.push({});
}
array[0] = { key: '0', text: '1:00', value: '1:00' };

function transform(arr) {
  for (var i = 0; i < arr.length; i++) {
    arr[i].key = i.toString();
    if (i % 2 === 0 && i !== 0) {
      arr[i].text = Number(arr[i - 2].text.split(':')[0]) + 1 + ':00';
      arr[i].value = arr[i].text;
    } else if (i % 2 !== 0) {
      arr[i].text = arr[i - 1].text.split(':')[0] + ':30';
      arr[i].value = arr[i].text;
    }
  }
  return arr;
}

console.log(transform(array));

Answer 2

You do not need an additional for loop to fill the array. Instead, just add arr[i] = {}; at the beginning of each iteration:

var array = Array(24);
array[0] = { key: '0', text: '1:00', value: '1:00' };

function transform(arr) {
  for (var i = 0; i < arr.length; i++) {
    **arr[i] = {};**
    arr[i].key = i.toString();
    if (i % 2 === 0 && i !== 0) {
      arr[i].text = Number(arr[i - 2].text.split(':')[0]) + 1 + ':00';
      arr[i].value = arr[i].text;
    } else if (i % 2 !== 0) {
      arr[i].text = arr[i - 1].text.split(':')[0] + ':30';
      arr[i].value = arr[i].text;
    }
  }
  return arr;
}