Display Array List in Accordion?

Question

I have an array of different times .How can I display the array elements like in the photo below .

const doctorSchedule =["08:00","08:10","08:20","08:30","08:40","08:50","09:00","09:10","09:20","09:30","09:40","09:50","10:00","10:10","10:20","10:30","10:40","10:50",]

Answer 1

You can reduce the time slots by putting them into buckets based on the hour. After you group them, you can iterate through the entries and create accordion items for each hour and generate radio buttons for each of the time slots in the hour bucket.

const doctorSchedule = [
  "08:00", "08:10", "08:20", "08:30", "08:40", "08:50",
  "09:00", "09:10", "09:20", "09:30", "09:40", "09:50",
  "10:00", "10:10", "10:20", "10:30", "10:40", "10:50",
];

const slots = doctorSchedule.reduce((acc, time) =>
  ((hour) => ({ ...acc, [hour]: [...(acc[hour] ?? []), time] }))
  (parseInt(time.split(':')[0], 10)), {});

$('.accordion').append(Object.entries(slots).map(([hour, times]) =>
  $('<div>')
    .addClass('accordion-item')
    .append($('<h2>')
      .addClass('accordion-header')
      .attr('id', `heading-${hour}`)
        .append($('<button>')
          .addClass('accordion-button collapsed')
          .prop('type', 'button')
          .attr('aria-expanded', 'true')
          .attr('aria-controls', 'collapseOne')
          .attr('data-bs-toggle', 'collapse')
          .attr('data-bs-target', `#collapse-${hour}`)
          .text(`${(hour + '').padStart(2, '0')}:00`)))
    .append($('<div>')
      .addClass('accordion-collapse collapse')
      .attr('id', `collapse-${hour}`)
      .attr('aria-labelledby', `#heading-${hour}`)
      .append($('<div>')
        .addClass('accordion-body')
        .append(times.map(time =>
          $('<div>')
            .addClass('form-check form-check-inline')
            .append($('<input>')
              .addClass('form-check-input')
              .prop('type', 'radio')
              .attr('name', 'time-slot'))
            .append($('<label>')
              .addClass('form-check-label')
              .text(time))
            ))))));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="container">
  <div class="accordion" id="accordionExample"></div>
</div>

<!--

Notes:

* https://getbootstrap.com/docs/5.0/components/accordion/
* https://getbootstrap.com/docs/5.0/forms/checks-radios/

-->