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.

Answer 1

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>