Question

我有三个数组作为json返回，我想在一个新列中显示每个数组。我怎样才能做到这一点？

这是$.post函数

  $.post("/booking/times", {
      id: $("#user_id").val(),
      selectedDay: formattedDate
    },
    function(data) {
      console.log(data);
      $('#dayTimes').empty();
      $(".loading-icon").hide();


      if (data.times.length == 0) {
           console.log("no available times");
      } else {
        $.each(data.times, function(index, value) {
          console.log(value);
        });
      }
    });

以下是我在console.log内each得到的json输出：

{  
    "times":[  
        [  
            "10:30 - 11:00",
            "11:00 - 11:30",
            "11:30 - 12:00",
            "12:00 - 12:30",
            "12:30 - 13:00",
            "13:00 - 13:30",
            "13:30 - 14:00"
        ],
        [  
            "14:00 - 14:30",
            "14:30 - 15:00",
            "15:00 - 15:30",
            "15:30 - 16:00",
            "16:00 - 16:30",
            "16:30 - 17:00"
        ],
        [  
            "17:00 - 17:30",
            "17:30 - 18:00",
            "18:00 - 18:30",
            "18:30 - 19:00",
            "19:00 - 19:30",
            "19:30 - 20:00"
        ]
    ]
}

Answer 1

尝试将其放入$ .each中，我将其采样到表中输出。

output = '<table border="1">';
$.each(value, function(index, row) {
    output += '<tr>';
    $.each(row, function(index, cell) {
        output += '<td>' + cell + '</td>';
    });
    output += '</tr>';
});
output += '</table>';
$('#div_element').html(output);

Answer 2

试试这个 次是你的数组

var table = $("<table></table>");
var thead = $("<thead></thead>");
var tbody = $("<tbody></tbody>");
var trhead = $("<tr></tr>");

for(var i=0;i<times.length;i++){

    $(trhead).append('<th>coloumn</th>');
    var trbody = $("<tr></tr>");
    for(j=0;j<times[i].length;j++){
        $(trbody).append('<td>'+times[i][j]+'</td>');
    }
    $(tbody).append($(trbody));

}
$(thead).append($(trhead));
$(table).append($(thead));
$(table).append($(tbody));

Answer 3

@raqulka。在新列中显示每个数组是什么意思？

如果要在html表中将数组中的值显示为字符串。然后尝试按照

$.post("/booking/times", {
      id: $("#user_id").val(),
      selectedDay: formattedDate
    },
    function(data) {

      var body = document.getElementsByTagName('body')[0];
      console.log(data);
      $('#dayTimes').empty();
      $(".loading-icon").hide();


      if (data.times.length == 0) {
           console.log("no available times");
      } else {

        var tbl = document.createElement('table');
        tbl.style.width = '100%';
        tbl.setAttribute('border', '1');
        var tbdy = document.createElement('tbody');
        var tr = document.createElement('tr');
        $.each(data.times, function(index, value) {
            var td = document.createElement('td');
            td.appendChild(document.createTextNode(value.toString()))
            tr.appendChild(td)
        });
        tbdy.appendChild(tr);
        tbl.appendChild(tbdy);
        body.appendChild(tbl)
      }
    });

Answer 4

我最终使用的是这个。

    $.each(data.times, function(index, value) {
      // console.log(value);
      var timesColumns = '<div class="col-md-4">';
      $.each(value, function(key, value) {
        // console.log(value);
        timesColumns += '<div class="pretty superhoidjad-booking "><input name="available_times[]" class="available_times" type="checkbox" value="' + value + '"/><label><i class="mdi mdi-check"></i>' + value + '</label></div>';
        // console.log(times);
      });
      timesColumns += "</div>";
      console.log(timesColumns);
      $("#dayTimes").append(timesColumns);

    });

如何在foreach jQuery中为每个数组添加新列

4 个答案: