如何爲每個數組中的每個數組添加新列jQuery

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); 
     }); 
     } 
    }); 

這裏是JSON輸出我從console.log得到each內：

{ 
    "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

@raqulka。在新列中顯示每個數組是什麼意思？

如果您想在數據表中以字符串形式顯示數組中的值。然後嘗試以下步驟：

$.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 2

試着把這個放到你的$ .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 3

試試這個 時間是你的陣列

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 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); 

    });