Determine the total accumulation of time entities in VueJS

My task involves working with an array of time objects that users will add. The array comprises values like this, with a generic example of "01:01:01" for each date value.

let timeObjects = ["01:01:01", "01:01:01", "01:01:01"];

The goal is to iterate through the array and calculate the total amount of time. In this case, the desired result would be "03:03:03". Despite searching for solutions, I have not yet found a way to achieve this. I am hoping someone familiar with date formatting can assist me. Just to provide context, I am using VueJS, MongoDB, and Express in my project.

javascriptarraysvue.jstimedate-formatting

Answer №1

    const timeValues = ["03:57:58", "01:35:44", "01:01:01"];

    const totalTime = timeValues.map(time => time.split(':')).reduce((accumulator, currentItem) => {
        accumulator[0] += parseInt(currentItem[0]);
        accumulator[1] += parseInt(currentItem[1]);
        accumulator[2] += parseInt(currentItem[2]);

        if (accumulator[2] > 60) {
            accumulator[1]++;
            accumulator[2] %= 60;
        }

        if (accumulator[1] > 60) {
            accumulator[0]++;
            accumulator[1] %= 60;
        }

        return accumulator;
    }, [0, 0, 0])
    .join(':');

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering CORS Error while trying to access Guest App in Virtualbox using Vue, Express, and Axios

I encountered an issue while trying to access my Vue app in Virtualbox from the host, both running on Linux Mint 20. Although I can now reach the login page from my host, I am consistently faced with a CORS error during login attempts: Cross-Origin Request ...

javascriptnode.jsvue.jsexpressvirtualbox

Three fixed position divs arranged horizontally side by side

I am attempting to organize 3 divs in a row using Flex. ISSUE 1: The div that is centered is set with position: fixed. However, the two other divs on each side do not stay aligned with the centered fixed div when scrolling. If I change the centered div to ...

javascripthtmlcss

The error code TS2554 is triggered when 5 arguments are passed instead of the expected 3-4

I'm utilizing the gsap plugin to craft a captivating text animation effect. As I reached the last line of code in my 'animation_text_1' function, specifically where it states "TweenMax.staggerFromTo(.....)", an error cropped up which read: ...

javascripthtmlangulargsap

Despite the correct value being displayed in the console.log, the Textfield is not responding to the Reducer

I am currently working on a project to create a tool that can iterate through the pupils of a school class. In order to achieve this, I have implemented a text field in a react component that displays a value: <input className="form-control" onChange={ ...

javascriptreactjsreduxreact-reduxflux

Pause for a moment before displaying the VueJS loading screen

When using VueJS, I have implemented a loader to be displayed on each route like this: router.beforeEach((to, from, next) => { store.commit('loading', true); next(); }) However, it seems unnecessary to show the loader for a request that ...

javascriptvue.jsvuex

The output from the Compute function is not showing up in the TextBox as expected

I'm currently working on an HTML page that contains two textboxes and a button. I've created a Compute function to display the result in one of the textboxes, but unfortunately, it's not functioning as expected. No alerts are appearing on th ...

javascripthtml

Is there a way to retrieve postmessage data from React?

I am attempting to embed a React URL within an iframe in my JSP project. Here is the code snippet from the sender side: <iframe id="eda" style="display: none;" src="http://myhost:3000/" width="100%" heig ...

javascriptreactjspostmessage

Assign an AJAX call to retrieve data from a MySQL table and store it in a

In my database, I have a table that includes fields for 'user_name' and 'user_round'. My goal is to set the 'user_round' field to match the value of a JavaScript variable called 'Level'. However, when I run my code, ...

javascriptjquerymysqlajax

I am looking to pair a unique audio clip with each picture in my collection

I have implemented a random slideshow feature that cycles through numerous images. I am now looking to incorporate a brief audio clip with each image, synchronized with the array I have established for the random pictures. The code snippet below is a simil ...

javascriptarrayshtmlimagehtml5-audio

Addressing the issue of empty ngRepeat loops

Utilizing ngRepeat to generate table rows: <tr ng-repeat="User in ReportModel.report" on-finish-render> <td><span>{{User.name}}</span></td> </tr> An on-finish-render directive triggers an event upon completion of t ...

javascriptangularjsangularjs-directiveangularjs-ng-repeat

What are the steps to make ng-show functional in an AngularJS application?

I am attempting to implement a hover effect where an image is displayed over another image upon hovering over its container. I have been trying to achieve this using Angular and ng-show, but for some reason, the image with the ng-show attribute remains hid ...

javascriptangularjsng-show

display a new feature immediately upon the user's login

I encountered a scenario where the user is supposed to log in, and upon successful login, another component should be displayed. However, this functionality is not working as expected for me. I have to click the login button again or refresh the page to vi ...

javascriptreactjs

After installing the latest version of [email protected], I encountered an error stating "Module 'webpack/lib/node/NodeTemplatePlugin' cannot be found."

Upon updating to nextjs version 10.1.3, I encountered an error when running yarn dev. Error - ./public/static/style.scss Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin' Require stack: - /path_to/node_modules/mini-css-extract-plugi ...

javascriptnode.jswebpacknext.js

Cleaning up React async functions using hooks for fetching data

This code snippet is from a functional component. Within this component, there is a submit() function that handles form submission: async function handleSubmit(event) { event.preventDefault(); try { let resp = await fetch("FOOBAR/BAX", { ...

javascriptreactjsreact-effects

Navigating React Router: Updating the page on back button press

Looking for a solution to a persistent issue. Despite various attempts and exhaustive research, the problem remains unresolved. Here's the situation: Within my React-Router-Dom setup, there is a parent component featuring a logo that remains fixed an ...

javascripthtmlcssreactjsreact-router

The attempt to access 'reading params' is resulting in an error due to undefined properties

Looking for some assistance in resolving an error I'm encountering. Below is a snippet of my code: const ProductScreen = ({match, history}) => { const [qty, setQty] = useState(1); const dispatch = useDispatch(); const productDetail ...

javascriptreactjs

Rounded Corners on an HTML5 Canvas Triangle

Hi there, I'm relatively new to working with HTML5 Canvas and I'm currently attempting to create a triangle with rounded corners. So far, I've experimented with: ctx.lineJoin = "round"; ctx.lineWidth = 20; However, I haven't been suc ...

javascripthtmlcanvas

VueJS - Best practices for utilizing getters and computed properties efficiently

Vue.js has a special place in my heart, especially its computed properties and the magic of Vuex getters. However, I've reached a crossroads where I'm unsure if my current approach may be impacting performance. This pattern features prominently ...

vue.jsvuexcomputed-propertiesvue-reactivity

The Mongoose query for the id field retrieves both the id and _id values

Within my Mongoose schema, there is a specific field named id which holds a unique identifier for each document. This operates using the same system as the standard _id field as shown below: var JobSchema = new mongoose.Schema({ id: { type:String, requi ...

javascriptjsonnode.jsmongodbmongoose

Revamping jQuery for a React component

As I transition away from using jQuery for quick hides, shows, and CSS changes in favor of React components that require re-rendering without triggering the jQuery actions requiring a page refresh, I find myself needing to set state within each component. ...

javascriptjqueryreactjscomponents