foreach jQuery内の各配列に新しい列を追加する方法

Question

私は3つの配列を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); 
     }); 
     } 
    }); 

は私がeach内console.logから何を得るの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

@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 2

これをあなたの$の中に入れてみましょう。テーブルに出力するためにサンプリングしました。

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

    });