How can I convert incoming seconds to hours in JS?

Question

In my Laravel 8 project I have a page for content creators. These pages contain general information about content producers. I wanted to pull the data of content producers from Algolia and I made the Algolia link to my project. There is a section on the page that shows how many hours and how many minutes content producers have, but this data is kept in Algolia in seconds. That's why I want to show the data coming on the basis of this second in the form of hours and minutes on the screen.

The data from Algolia is as follows. Seconds data also comes from: "length"

{
  "id": 99,
  "user_id": 613,
  "isLearnBite": 0,
  "name": "Write the Brand Strategy of Your Business",
  "cover": "https://omnicoursewebsites.s3.eu-west-2.amazonaws.com/courses/99/images/cover/513230_1642578467.jpg",
  "color": "#fefefe",
  "description": "Many solopreneurs struggle to clarify their business strategy and marketing goals because they can't define who they are and what they offer as a brand. With this mini-course, you will be able to understand the basics of branding and write yourself a brand strategy document which will help you make a solid start and stay on your track for long years.",
  "short_description": "A solid, strategic start for your small business or start-up.",
  "length": 6783,
  "order": 0,
  "status_id": 1,
  "created_at": "2022-01-18T07:14:42.000000Z",
  "updated_at": "2022-01-19T12:48:29.000000Z",
  "custom_fields": {
    "dynamic_link": "https://omnicourse.page.link/cC8bZNQ6WhU1ahGS9"
  },
  "lectures_count": 27,
  "lecturer_name": "Nil Yalcinkaya",
  "lecturer_username": "nile_brand_academy",
  "lecturer_avatar": "https://omnicoursewebsites.s3.eu-west-2.amazonaws.com/creator_thumbnail/613/2022-03-29/thumbnail_400X400_985347_1638513165.jpg",
  "tags": [
    30,
    43,
    150,
    206
  ],
  "categories": [
    2
  ],
  "last_listened_data": null,
  "user_rating": 0,
  "isFavorited": false,
  "isBookMarked": false,
  "isCompleted": false,
  "creator_profile": {
    "name": "Nil Yalcinkaya",
    "username": "nile_brand_academy",
    "avatar": "https://omnicoursewebsites.s3.eu-west-2.amazonaws.com/creator_thumbnail/613/2022-03-29/thumbnail_400X400_985347_1638513165.jpg",
    "about": "Hi! \r\nI write brand strategies for digital start-ups of the future and design their visual brand identities. \r\nSee My Services: Nile Brand Design\r\nFollow & Join Our Community to Learn More about Branding: Nile Brand Academy",
    "custom_fields": {
      "email_octopus_id": "bc6ec095-69ec-11ec-96e5-06b4694bee2a",
      "email_octopus_last_update": "2022-03-26 00:48:58",
      "avatar_thumb_400*400": "https://omnicoursewebsites.s3.eu-west-2.amazonaws.com/creator_thumbnail/613/2022-03-29/thumbnail_400X400_985347_1638513165.jpg",
      "linkedin": "https://www.linkedin.com/in/nilyalcinkaya/",
      "instagram": "https://www.instagram.com/nile.brand.design/",
      "twitter": "https://twitter.com/nilsyalcinkaya",
      "website": "https://www.nilebrand.design/"
    }
  },
  "_tags": [
    "App\\Course::99"
  ],
  "objectID": "App\\Course::99"
}

I'm showing this time data here. - show.blade.php

@if(isset($content['length']))
    <div class="flex items-center space-x-6">
        <div class="flex items-center">
            <img src="/assets/images/icon-clock-black.svg" alt="">
            <span  class="text-sm md:text-base leading-6 font-normal ml-1">{{ $content['length'] }} hrs</span>
            <a href="{{ $content['length'] }}" target="_blank"><img src="/assets/images/icon-clock-black.svg" alt=""></a>
        </div>
        <div class="flex items-center">
            <img src="/assets/images/icon-list-black.svg" alt="">
            <span  class="text-sm md:text-base leading-6 font-normal ml-1">{{ $content['lectures_count'] }} Lessons</span>
        </div>
    </div>
@endif

I guess I need to do this in JS, but I wanted to ask you because I don't know how to do it.

since that data is showed from a blade template.. maybe the best approach would be to just perform the required arithmetic there before echoing the value: `{{ $content['length'] / 3600 }}` (as long as you don't need to cast to number before the operation and with no further processing for better formatting the number) — Diego D, Nov 21 '22 at 12:39
This : https://stackoverflow.com/questions/6312993/javascript-seconds-to-time-with-format-hhmmss — Silent observer, Nov 21 '22 at 12:45
the question title is totally unrelated with the question itself.. and all the answers are going in that fake direction — Diego D, Nov 21 '22 at 12:45

score 2 · Accepted Answer · answered Nov 21 '22 at 12:41

2

You need to extract the Amount of Hours using JS.

Easiest way to do so will be using Date Object & toISOString() Method.

const time = document.querySelector("#time");

const seconds = 6783;
let date = new Date(null);
date.setSeconds(seconds);

const [hours, minutes, sec] = date.toISOString().substr(11, 8).split(":");
time.textContent = `${hours} Hour(s), ${minutes} Minutes & ${sec} Seconds`;

<div id="time"></div>

answered Nov 21 '22 at 12:41

Shivangam Soni

712
5
16

it doesn't really address the context of the question.. the value is printed when a given blade template is rendered.. using javascript would require to have a routine running when the page is loaded and by the way this answer doesn't address that. – Diego D Nov 21 '22 at 12:45
@DiegoD The Question clearly says that it needs to be done in JS & he doesn't know how to do that. Even the Title asks how to do it in JS & not PHP. So, please read the complete question before commenting. – Shivangam Soni Nov 21 '22 at 12:48
@ShivangamSoni I know very well what the question asked and that's why I went deep enough to see the code content and figure out the answer was just addressing the title. Anyway if who asked is happy with that who am I to say the contrary. At this point I wonder why the question needed a whole body at all since it was enough the title itself – Diego D Nov 21 '22 at 13:08

How can I convert incoming seconds to hours in JS?

1 Answers1