How to transform array of arrays into nested array of objects

Question

I have an array of arrays:

const data = [
  ["10:00", "12:00", "13:00", "14:30"],
  ["10:00", "12:00", "13:00", "14:30"],
  ["10:00", "12:00", "13:00", "14:30"],
  ["10:00", "12:00", "13:00", "14:30"],
  ["10:00", "12:00", "13:00", "14:30"],
  ["10:00", "12:00", "13:00", "14:30"],
  ["10:00", "12:00", "13:00", "14:30"]
];

Here is the desired output:

const output = [
  [
    {
      startTime: "10:00",
      endTime: "12:00"
    },
    {
      startTime: "12:00",
      endTime: "13:00"
    },
    {
      startTime: "13:00",
      endTime: "14:30"
    }
  ],
  [
    {
      startTime: "10:00",
      endTime: "12:00"
    },
    {
      startTime: "12:00",
      endTime: "13:00"
    },
    {
      startTime: "13:00",
      endTime: "14:30"
    }
  ],
  [
    {
      startTime: "10:00",
      endTime: "12:00"
    },
    {
      startTime: "12:00",
      endTime: "13:00"
    },
    {
      startTime: "13:00",
      endTime: "14:30"
    }
  ],
  [
    {
      startTime: "10:00",
      endTime: "12:00"
    },
    {
      startTime: "12:00",
      endTime: "13:00"
    },
    {
      startTime: "13:00",
      endTime: "14:30"
    }
  ],
  [
    {
      startTime: "10:00",
      endTime: "12:00"
    },
    {
      startTime: "12:00",
      endTime: "13:00"
    },
    {
      startTime: "13:00",
      endTime: "14:30"
    }
  ],
  [
    {
      startTime: "10:00",
      endTime: "12:00"
    },
    {
      startTime: "12:00",
      endTime: "13:00"
    },
    {
      startTime: "13:00",
      endTime: "14:30"
    }
  ],
  [
    {
      startTime: "10:00",
      endTime: "12:00"
    },
    {
      startTime: "12:00",
      endTime: "13:00"
    },
    {
      startTime: "13:00",
      endTime: "14:30"
    }
  ]
];

Currently, I cannot get how to implement the nesting structure. Here is what I have tried so far to get the desired output:

const transformData = () => {
  return data.map((item, index) => {
    return {
      startTime: item[index],
      endTime: item[index + 1]
    }
  });
};

Answer 1

You are missing the fact that you should not override your existing array data with your desired result, as you will need to iterate over it from beginning to end, including iterating through each sub array. The desired output needs to be a new array instead.

Pass into your transformData the data object and have the function create a data structure with your desired output instead. I also modified the inner logic of getting the startDate and endDate via modulus math... like so:

const data = [
  ["01:00", "02:00", "03:00", "04:00"],
  ["01:30", "02:30", "03:30", "04:30"],
  ["02:00", "03:00", "04:00", "05:00"],
  ["02:00", "03:30", "04:30", "05:30"],
  ["10:00", "10:01", "10:02", "10:03"],
  ["11:00", "12:00", "13:00", "14:00"],
  ["21:00", "21:30", "23:00", "23:30"]
];

let transform = (someData) => {
    let output = [];

    someData && someData.forEach(arr => {
        output.push(arr.map((elem, index) => {
          return {
              [index % 2 === 0 ? 'startTime' : 'endTime']: elem
          };
        }));
    });

    return output;
};

// Using HTML element to display results

document.getElementById('result').innerHTML = JSON.stringify(transform(data));

<div id="result"></div>

Answer 2

This should work:

const transformData = (data) => {
  return data.map((items) => {
    const aux = [];
    for (let i = 0; i < items.length - 1; i++) {
      aux.push({
        startTime: items[i],
        endTime: items[i + 1]
      });
    }
    return aux;
  });
};

Answer 3

You can try the following:

data.map((arr) => {
    let x = [];
    for (let i = 0; i < arr.length - 1; i++) {
        x.push({ startTime: arr[i], endTime: arr[i + 1] });
    }
    return x;
});

Answer 4

You can try this way

const timeList = [
    ["10:00", "12:00", "13:00", "14:30"],
    ["10:00", "12:00", "13:00", "14:30"],
    ["10:00", "12:00", "13:00", "14:30"],
    ["10:00", "12:00", "13:00", "14:30"],
    ["10:00", "12:00", "13:00", "14:30"],
    ["10:00", "12:00", "13:00", "14:30"],
    ["10:00", "12:00", "13:00", "14:30"]
];

const getTimeTable = (timeData: string[]) => {
    return timeData.slice(0, 3).map((data, index: number) => ({ startDate: data, endDate: timeData[index + 1] }));
}
const value = timeList.map((x) => getTimeTable(x));

console.log('value', ...value);

Answer 5

You could create a function to create your new data structure for the inner array and then map over that. In the following example compile_times uses reduce to create the new inner array. The fourth argument of reduce is the entire array, and here { [i + 1]: endTime } is used to pick the next item from the array and assign it to endTime.

const data = [
  ["10:00", "12:00", "13:00", "14:30"],
  ["10:00", "12:00", "13:00", "14:30"],
];

const compile_times = (times) =>
  times.reduce(
    (acc, startTime, i, { [i + 1]: endTime }) => endTime ?
      acc.concat({ startTime, endTime }) :
      acc,
    []
  );

const res = data.map(compile_times);

console.log(res);