The data I have from Algolia in my project includes a seconds data presented as an array.
This is the method I use to extract the seconds data from Algolia:
@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
In the above code snippet, the seconds data is extracted as {{ $content['length']}}.
The Algolia data is structured as follows, with the length value differing for each content:
{
"id": 99,
"user_id": 613,
... (other data fields) ...
"length": 6783,
... (other data fields) ...
"lectures_count": 27,
... (other data fields) ...
}
I attempted to create a JS code to display the length data in hour minute seconds format, but encountered issues. The code snippet is as follows:
@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
However, calling this function resulted in an error stating "call undefined function." Any assistance on resolving this issue would be greatly appreciated.