Javascript - Move forward overlapping intervals

Question

Having this input:

[
 {key: 'a', start: 0, end: 100}, // 100ms of duration
 {key: 'b', start: 10, end: 30}, // 20ms of duration
 {key: 'c', start: 110, end: 200}, // 90ms of duration,
 {key: 'd', start: 300, end: 400},
]

I'd like this output:

 {key: 'a', start: 0, end: 100}, // 100ms of duration
 {key: 'b', start: 100, end: 120}, // still 20ms of duration
 {key: 'c', start: 120, end: 210}, // still 90ms of duration
 {key: 'd', start: 300, end: 400}, // no modifications

I need to fix only the overlapping intervals

Answer 1

Get the duration of the item (by subtracting its start property from its end property), set its start property to the last item's end property and set its end property to the duration plus its start property.

const arr=[{key:"a",start:0,end:100},{key:"b",start:10,end:30},{key:"c",start:110,end:200},{key:"d",start:300,end:400}];

for (let i = 1; i < arr.length; i++) {
  if (arr[i].start < arr[i - 1].end) {
    const duration = arr[i].end - arr[i].start;
    arr[i].start = arr[i - 1].end;
    arr[i].end = arr[i].start + duration;
  }
}

console.log(arr)