Как я могу преобразовать входящие данные в JS?

У меня есть данные из Алголии в моем проекте. В этих данных есть данные seconds, которые представлены в форме array.

Вот как я получаю данные о секундах из Алголии:

@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  id = "time" value = "{{ $content['length'] }}" class = "text-sm md:text-base leading-6 font-normal ml-1">{{ $content['length'] }}hrs</span>
   </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

В приведенном выше коде я получаю данные о секундах в {{ $content['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"
}

Я написал код JS, как показано ниже, для печати этих данных длины в формате часов, минут, секунд, но я думаю, что делаю что-то не так, это не сработало.

@section('scripts')
    <script type = "text/javascript">

        function secondsToHms(d) {
            var d = getElementById("time").value;
            var h = Math.floor(d / 3600);
            var m = Math.floor(d % 3600 / 60);
            var s = Math.floor(d % 3600 % 60);

            var hDisplay = h > 0 ? h + (h == 1 ? " hour, " : " hours, ") : "";
            var mDisplay = m > 0 ? m + (m == 1 ? " minute, " : " minutes, ") : "";
            var sDisplay = s > 0 ? s + (s == 1 ? " second" : " seconds") : "";
            return hDisplay + mDisplay + sDisplay; 
        }

    </script>
@endsection

Кроме того, когда я вызываю эту функцию, я получаю сообщение об ошибке «вызов неопределенной функции». Я был бы очень признателен, если бы вы могли помочь мне с этой частью.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
57
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В вашей функции secondsToHms вы передаете переменную с именем d в качестве параметра функции, а также объявляете переменную d в следующей строке — вы не можете этого сделать. Я проверил этот код, и он работает:

function secondsToHms(d) {
    var h = Math.floor(d / 3600);
    var m = Math.floor(d % 3600 / 60);
    var s = Math.floor(d % 3600 % 60);

    var hDisplay = h > 0 ? h + (h == 1 ? " hour, " : " hours, ") : "";
    var mDisplay = m > 0 ? m + (m == 1 ? " minute, " : " minutes, ") : "";
    var sDisplay = s > 0 ? s + (s == 1 ? " second" : " seconds") : "";
    return hDisplay + mDisplay + sDisplay; 
}

console.info(secondsToHms(500));
console.info(secondsToHms(5000));
console.info(secondsToHms(12571243));

Итак, как я могу использовать эту функцию в {{ $content['length'] }}?

iguner 22.11.2022 14:35

Извините, но я не знаком с этим синтаксисом, поэтому я не могу вам помочь. Вы должны иметь возможность вызывать эту функцию с параметром по вашему выбору, но, как я уже сказал, этот синтаксис ничего не значит для меня прямо сейчас.

AbsoluteZero 22.11.2022 16:41

Другие вопросы по теме