首页 > 解决方案 > 填补空档

问题描述

我需要建立一个时间表,有一个包含数据的数组: 1.json.schedule_day 这是构建时间表输出的代码:

            html  = '<div class="calendar px-4 owl-carousel owl-theme d-flex">';
            for (var i = 0; i < json.schedule_date.length; i++) {
                html += '<div class="item mb-2 text-center">';
                html += '  <div class="mb-2 small">';
                html += '   <p class="m-0">' + json['schedule_date'][i]['weekday_name'] + '</p>';
                html += '  <p class="m-0 text-muted">' + json['schedule_date'][i]['day'] + '</p>';
                html += '  </div>';
                html += '  <div class="slots d-flex flex-column">';
                    $.each(json['schedule_date'][i]['slots'], function(i, slot) {
                        if (i > 2) {
                            var $expanded = 'expanded d-none'
                        }   
                    
                        html += '  <button data-date-time="' + slot.datetime + '" type="button" class="btn btn-primary btn-booking mb-2 p-1 ' + $expanded + '" >' + slot.time + '</button>';
                        
                    });
                
                html += '  </div>';
                html += '</div>';
            }
            html += '</div>';

结果,我得到了一个时间表,一切都很好

schedule_now

但是您需要填写空时隙(-)才能得到它:

schedule_empty_slot

这是我的 json.schedule_day 的一个例子

  [
  {
    "date": "2020-07-27",
    "day": "27 Июл",
    "weekday_name": "Пн",
    "slots": [
      {
        "time": "19:57",
        "datetime": "2020-07-27 19:57",
        "booked": false
      },
      {
        "time": "20:27"
      },
      {
        "time": "20:57"
      },
      {
        "time": "21:27"
      },
      {
        "time": "21:57"
      }
    ]
  }
]

标签: javascriptnode.jsjson

解决方案


推荐阅读