javascript - jQuery Ajax 用于 btn-group bootstrap 的每个函数

Question

对不起，我不知道如何在下一个 btn-group div 中设置我的 JSON 时间。
我需要将它分组为 4 个“按钮”，而不是下一个 <div class="btn-group mt-1"
这是我的 JSfiddle:

var JSON = [
          {
          "Tennis 1": {
            "IntervalTime": {
              "Dom": [
                "09:00", //move into buttons
                "10:00", //move into buttons
                "11:00", //move into buttons
                "12:00", //move into buttons
                "13:00", //move into buttons
                "14:00", //move into buttons
                "15:00", //move into buttons
                "16:00", //move into buttons
                "17:00", //move into buttons
                "18:00" //move into buttons
              ]
            }
          },
          "Padel 1": {
            "IntervalTime": {
              "Dom": [
                "09:00", //move into buttons
                "10:00", //move into buttons
                "11:00", //move into buttons
                "12:00", //move into buttons
                "13:00", //move into buttons
                "14:00" //move into buttons
              ]
            }
          }
        }],html;
        
 $(document).ready(function () { 
  html = '<div class="container" >';
		$.each(JSON, function(index, v){
        html += '<div class="col-sm-4">Tennis 1 <--- Here JSON Resource<div class="col-sm-4">TIMES</div></div>';
        html += '<div class="btn-group" role="group" aria-label="Orari Disponibili">';
        html += '<button type="button" class="btn btn-outline-primary">09:00</button>';
        html += '<button type="button" class="btn btn-outline-primary">10:00</button>';
        html += '<button type="button" class="btn btn-outline-primary">11:00</button>';
        html += '<button type="button" class="btn btn-outline-primary">12:00</button>';
        html += '</div>';
        html += '<div class="btn-group mt-1" role="group" aria-label="Orari Disponibili">';
        html += '<button type="button" class="btn btn-outline-primary">13:00</button>';
        html += '<button type="button" class="btn btn-outline-primary">14:00</button>';
        html += '<button type="button" class="btn btn-outline-primary">15:00</button>';
        html += '<button type="button" class="btn btn-outline-primary">16:00</button>';
        html += '</div>';
        html += '<div class="btn-group mt-1" role="group" aria-label="Orari Disponibili">';
        html += '<button type="button" class="btn btn-outline-primary">17:00</button>';
        html += '<button type="button" class="btn btn-outline-primary">18:00</button>';
        html += '</div>';
        //Seconda riga orari
        html += '<div class="col-sm-4">Padel 1 <--- Here JSON Resource<div class="col-sm-4">TIMES</div></div>';
        html += '<div class="btn-group mt-1" role="group" aria-label="Orari Disponibili">';
        html += '<button type="button" class="btn btn-outline-primary">09:00</button>';
        html += '<button type="button" class="btn btn-outline-primary">10:00</button>';
        html += '<button type="button" class="btn btn-outline-primary">11:00</button>';
        html += '<button type="button" class="btn btn-outline-primary">12:00</button>';
        html += '</div>';
        html += '<div class="btn-group mt-1" role="group" aria-label="Orari Disponibili">';
        html += '<button type="button" class="btn btn-outline-primary">13:00</button>';
        html += '<button type="button" class="btn btn-outline-primary">14:00</button>';
        html += '</div>';
});
     html += '</div>';
     $('body').append(html);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

任何想法表示赞赏

Answer 1

这段代码应该做你想做的。它遍历 JSON[0] 中对象的键，输出键名和对象该元素的时间列表。

$(document).ready(function() {
  html = '<div class="container" >';
  for (let activity in JSON[0]) {
    html += '<div class="col-sm-4">' + activity + '</div>';
    for (day in JSON[0][activity].IntervalTime) {
      html += '<div class="col-sm-4">' + day + ' Times</div>';
      const times = JSON[0][activity].IntervalTime[day];
      times.forEach(function(time, index) {
        if (index % 4 == 0) {
          if (index != 0) html += '</div>';
          html += '<div class="btn-group" role="group" aria-label="Orari Disponibili">';
        }
        html += '<button type="button" class="btn btn-outline-primary">' + time + '</button>';
      });
      html += '</div>';
    }
  }
  $('body').append(html);
});

var JSON = [{
    "Tennis 1": {
      "IntervalTime": {
        "Dom": [
          "09:00", //move into buttons
          "10:00", //move into buttons
          "11:00", //move into buttons
          "12:00", //move into buttons
          "13:00", //move into buttons
          "14:00", //move into buttons
          "15:00", //move into buttons
          "16:00", //move into buttons
          "17:00", //move into buttons
          "18:00" //move into buttons
        ]
      }
    },
    "Padel 1": {
      "IntervalTime": {
        "Sat": [
          "09:00", //move into buttons
          "10:00", //move into buttons
          "11:00", //move into buttons
          "12:00", //move into buttons
          "13:00", //move into buttons
          "14:00" //move into buttons
        ],
        "Mar": [
          "11:00", //move into buttons
          "12:00", //move into buttons
          "13:00", //move into buttons
          "14:00", //move into buttons
          "15:00", //move into buttons
          "16:00"  //move into buttons
        ]
      }
    }
  }],
  html;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>