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]
 }
 });
};

• Barmar: nesting structure == nested loops
• WSD: ... or recursion :)

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>

• Ben Stephens: This doesn't appear to give the correct result. I believe the question would want [{"startTime":"01:00","endTime":"02:00"},{"startTime":"02:00","endTime":"03:00"},{"startTime":"03:00","endTime":"04:00"}] instead of [{"startTime":"01:00"},{"endTime":"02:00"},{"startTime":"03:00"},{"endTime":"04:00"}] for the first item in your example data.
• AGE: @BenStephens you are right, I should have done an object comparison I just need to change the object key logic accordingly... editing now

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);

• Ben Stephens: timeData.slice(0, 3) would not account for timeData varying in length (this is not mentioned in the question, but it seems like a fair assumption to me); perhaps it could be timeData.slice(0, -1)?

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);