JavaScript - combining elements of an array of time

Question

JavaScript - combining elements of an array of time

I've encountered a challenge where I need to calculate the total time duration from an array that contains time durations like

['00:30', '01:30', '03:00', '04:30']

. The code snippet I'm using for this task seems to be producing unexpected results such as 00000.5010.503040.5:0. Has anyone faced a similar issue when trying to sum up time durations before?

function calc_tot_dur() {
  var total_durs = ['00:30', '01:30', '03:00', '04:30'];
  var dim = '00:00';
  jQuery.each(total_durs, function(index, value) {
    //console.log(value);
    dim_split = dim.split(":");
    hs = dim_split[0];
    ms = dim_split[1];

    value_split = value.split(":");
    v_hs = value_split[0];
    v_ms = value_split[1];
    console.log(hs + v_hs);
    dim = (hs + v_hs) + ':' + (ms + v_ms);
    // console.log(dim);
    ms_hs = (ms + v_ms) / 60;
    if (ms_hs > 0) {
      dim = (hs + v_hs + ms_hs) + ':' + (00);
    } else {
      dim = (hs + v_hs) + ':' + (ms + v_ms);
    }
  });
  alert(dim);
}

javascript arrays time

Answer 1

Answer №1

Using the reduce method, here's a solution along with an adjustment for the length of the parts.

var total_durations = ['00:30', '01:30', '03:00', '04:30'],        
    final_result = function (arr) {
        var sum = arr.reduce(function (accumulator, currentValue) {
                var timeArray = currentValue.split(':').map(Number);
                return accumulator + 60 * timeArray[0] + timeArray[1];
            }, 0);

        return [Math.floor(sum / 60), sum % 60].map(function (time) {
            var stringValue = time.toString();
            return stringValue.length < 2 ? '0' + stringValue : stringValue;
        }).join(':');
    }(total_durations);

document.write('<pre>' + JSON.stringify(final_result, 0, 4) + '</pre>');

Answer 2

Using the reduce method, here's a solution along with an adjustment for the length of the parts.

var total_durations = ['00:30', '01:30', '03:00', '04:30'],        
    final_result = function (arr) {
        var sum = arr.reduce(function (accumulator, currentValue) {
                var timeArray = currentValue.split(':').map(Number);
                return accumulator + 60 * timeArray[0] + timeArray[1];
            }, 0);

        return [Math.floor(sum / 60), sum % 60].map(function (time) {
            var stringValue = time.toString();
            return stringValue.length < 2 ? '0' + stringValue : stringValue;
        }).join(':');
    }(total_durations);

document.write('<pre>' + JSON.stringify(final_result, 0, 4) + '</pre>');

Answer 3

Answer №2

There are some missing parseInt calls in certain parts of the code, causing unexpected results when summing values.

"00" + "00" //concatenates strings to become 0000
parseInt("00") + parseInt("00") //sums as integers to become 0

To fix this issue:

function calculate_total_duration() {
  var total_durations = ['00:30', '01:30', '03:00', '04:30'];
  var base_time = '00:00';
  jQuery.each(total_durations, function(index, value) {      
    base_split = base_time.split(":");
    base_hours = parseInt(base_split[0]);   // parse integer here
    base_minutes = parseInt(base_split[1]); 

    value_split = value.split(":");
    value_hours = parseInt(value_split[0]);  
    value_minutes = parseInt(value_split[1]); 
    base_time = (base_hours + value_hours) + ':' + (base_minutes + value_minutes);

    minutes_to_hours = parseInt((base_minutes + value_minutes) / 60);   
    if (minutes_to_hours > 0) {
      base_time = (base_hours + value_hours + minutes_to_hours) + ':' + '00';
    } else {
      base_time = (base_hours + value_hours) + ':' + (base_minutes + value_minutes);
    }
 });
 console.log(base_time);
}

Answer 4

There are some missing parseInt calls in certain parts of the code, causing unexpected results when summing values.

"00" + "00" //concatenates strings to become 0000
parseInt("00") + parseInt("00") //sums as integers to become 0

To fix this issue:

function calculate_total_duration() {
  var total_durations = ['00:30', '01:30', '03:00', '04:30'];
  var base_time = '00:00';
  jQuery.each(total_durations, function(index, value) {      
    base_split = base_time.split(":");
    base_hours = parseInt(base_split[0]);   // parse integer here
    base_minutes = parseInt(base_split[1]); 

    value_split = value.split(":");
    value_hours = parseInt(value_split[0]);  
    value_minutes = parseInt(value_split[1]); 
    base_time = (base_hours + value_hours) + ':' + (base_minutes + value_minutes);

    minutes_to_hours = parseInt((base_minutes + value_minutes) / 60);   
    if (minutes_to_hours > 0) {
      base_time = (base_hours + value_hours + minutes_to_hours) + ':' + '00';
    } else {
      base_time = (base_hours + value_hours) + ':' + (base_minutes + value_minutes);
    }
 });
 console.log(base_time);
}

Answer 5

Answer №3

If you're looking to streamline your date and duration handling in JavaScript, consider giving Moment a try. This powerful library is perfect for simplifying these tasks. Take a look at this demo on JSFiddle to see it in action:

https://jsfiddle.net/25zfe4h1/

function calculateTotalDuration() {
  var totalDurations = ['00:30', '01:30', '03:00', '04:30'];
  var totalTime = '00:00';
  jQuery.each(totalDurations, function(index, value) {
    var duration = moment.duration(value);
    totalTime = moment.duration(totalTime).add(duration);
  });
  alert(formatOutput(totalTime));
}

function formatOutput(result) {
  return result.hours() + ':' + result.minutes();
}

calculateTotalDuration();

Notice the reduced amount of code needed? You can even make the output more user-friendly with the humanize function, displaying '30 minutes' instead of '00:30'.

Answer 6

If you're looking to streamline your date and duration handling in JavaScript, consider giving Moment a try. This powerful library is perfect for simplifying these tasks. Take a look at this demo on JSFiddle to see it in action:

https://jsfiddle.net/25zfe4h1/

function calculateTotalDuration() {
  var totalDurations = ['00:30', '01:30', '03:00', '04:30'];
  var totalTime = '00:00';
  jQuery.each(totalDurations, function(index, value) {
    var duration = moment.duration(value);
    totalTime = moment.duration(totalTime).add(duration);
  });
  alert(formatOutput(totalTime));
}

function formatOutput(result) {
  return result.hours() + ':' + result.minutes();
}

calculateTotalDuration();

Notice the reduced amount of code needed? You can even make the output more user-friendly with the humanize function, displaying '30 minutes' instead of '00:30'.

Answer 7

Answer №4

To properly calculate the total, make sure to convert the times to numbers first.

var total_durations = ['00:30', '01:30', '03:00', '04:30'];
var total = 0;
total_durations.forEach(function(value){
  var times = value.split(":");
  var number = parseInt(times[0],10) + parseInt(times[1],10)/60;
  total += number;
});

Now, convert total back to the time format (hh:mm).

var numString = String(total).split(".");
var displayTime = ("0" + String(numString[0])).slice(-2) + ":" + String(numString[1]*6);

DEMO

var total_durations = ['00:30', '01:30', '03:00', '04:30'];
var total = 0;
total_durations.forEach(function(value){
  var times = value.split(":");
  var number = parseInt(times[0],10) + parseInt(times[1],10)/60;
  total += number;
});

var numString = String(total).split(".");
var displayTime = ("0" + String(numString[0])).slice(-2) + ":" + String(numString[1]*6);

alert(displayTime);

Answer 8

To properly calculate the total, make sure to convert the times to numbers first.

var total_durations = ['00:30', '01:30', '03:00', '04:30'];
var total = 0;
total_durations.forEach(function(value){
  var times = value.split(":");
  var number = parseInt(times[0],10) + parseInt(times[1],10)/60;
  total += number;
});

Now, convert total back to the time format (hh:mm).

var numString = String(total).split(".");
var displayTime = ("0" + String(numString[0])).slice(-2) + ":" + String(numString[1]*6);

DEMO

var total_durations = ['00:30', '01:30', '03:00', '04:30'];
var total = 0;
total_durations.forEach(function(value){
  var times = value.split(":");
  var number = parseInt(times[0],10) + parseInt(times[1],10)/60;
  total += number;
});

var numString = String(total).split(".");
var displayTime = ("0" + String(numString[0])).slice(-2) + ":" + String(numString[1]*6);

alert(displayTime);

Answer 9

Answer №5

Here is a straightforward functional solution in just one line:

let times = ['00:30', '01:30', '03:00', '04:30'],
    total = times.map(time => time.split(":").map(Number)).reduce((prev, current) => [prev[0] + current[0] + Math.floor((prev[1] + current[1]) / 60), (prev[1] + current[1]) % 60]);

document.write("<pre>" + total[0] + ":" + total[1] + "</pre>");

Answer 10

Here is a straightforward functional solution in just one line:

let times = ['00:30', '01:30', '03:00', '04:30'],
    total = times.map(time => time.split(":").map(Number)).reduce((prev, current) => [prev[0] + current[0] + Math.floor((prev[1] + current[1]) / 60), (prev[1] + current[1]) % 60]);

document.write("<pre>" + total[0] + ":" + total[1] + "</pre>");

JavaScript - combining elements of an array of time

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What is the best way to arrange an array or display it accurately?

When the button is clicked, update the text within the <script> tags utilizing jQuery, JavaScript, or PHP

After zooming in on the canvas and panning, I encountered a problem where I was unable to drag objects within the canvas. Instead, the canvas continued to pan as I tried to move the objects

Enhancing React URLs

Overlay a translucent image on top of another using JavaScript

Express.js application experiencing technical difficulties

ways to parse a json file and apply a filter to find overlapping objects in nodejs

Each time `fs.writeFile` is invoked, it initiates a fresh line

Is it possible to incorporate numerous instances of SlickGrid by utilizing an angular directive?

Sneaky spam and ads embedded within Joomla template

Can we find a method to incorporate multicolored borders?

Add a class to alternate elements when mapping over data in React

"Revamp the appearance of the div element upon clicking elsewhere on the

Using jQuery to manage multiple page requests on a single page

Failure of Angular to execute HTTP calls asynchronously

Did you manage to discover a foolproof method for the `filesystem:` URL protocol?

What is the process of incorporating a lowercase normalizer into an Elasticsearch mapping object?

Manipulating and inserting objects into an array using React and Typescript with an undefined type

Modify the file format depending on the browser being used as Internet Explorer

Executing several API endpoint requests using an array in Node.js