如何在javascript中將數據排序到表中？

Question

我有這樣的數據：

{
    "date": "2018-07-01",
    "hotel": "Hotel1",
    "room": "H1Room1",
    "qty": 3   
},
{
    "date": "2018-07-02",
    "hotel": "Hotel1",
    "room": "H1Room1",
    "qty": 3 
},
{
    "date": "2018-07-03",
    "hotel": "Hotel1",
    "room": "H1Room1",
    "qty": 2
},
{
    "date": "2018-07-01",
    "hotel": "Hotel1",
    "room": "H1Room2",
    "qty": 3   
},
{
    "date": "2018-07-02",
    "hotel": "Hotel1",
    "room": "H1Room2",
    "qty": 2   
},
{
    "date": "2018-07-01",
    "hotel": "Hotel2",
    "room": "H2Room1",
    "qty": 2 
},
{
    "date": "2018-07-02",
    "hotel": "Hotel2",
    "room": "H2Room1",
    "qty": 1 
}

我想使用Javascript將其放在桌子上。

輸出結果如下：
酒店 房間 2018-07-01 | 2018-07-02 | 2018年7月3日
hotel1 | H1Room1 | 3 | 3 | 2
hotel1 | H1Room2 | 2 | 1
hotel2 | H2Room1 | 2 | 1

如果可能，使用for循環。

Answer 1

 var HotelDetails = [{ "date": "2018-07-01", "hotel": "Hotel1", "room": "H1Room1", "qty": 3 }, { "date": "2018-07-02", "hotel": "Hotel1", "room": "H1Room1", "qty": 3 }, { "date": "2018-07-03", "hotel": "Hotel1", "room": "H1Room1", "qty": 2 }, { "date": "2018-07-01", "hotel": "Hotel1", "room": "H1Room2", "qty": 3 }, { "date": "2018-07-02", "hotel": "Hotel1", "room": "H1Room2", "qty": 2 }, { "date": "2018-07-01", "hotel": "Hotel2", "room": "H2Room1", "qty": 2 }, { "date": "2018-07-02", "hotel": "Hotel2", "room": "H2Room1", "qty": 1 }] $(document).ready(function(){ CreateHTMLTable(); }); var DateArray = []; function CreateHTMLTable() { var ResultHTML = "<table class='table'><tr>"; var TableHeader = "<th>Hotel</th><th>Room</th>"; var TableRow = ""; for(var k in HotelDetails) { if(HotelDetails[k].date != "" && !CheckDateArray(HotelDetails[k].date)) { TableHeader += "<th>" + HotelDetails[k].date + "</th>"; DateArray.push(HotelDetails[k].date); } } ResultHTML += TableHeader + TableRow + "</tr><table>"; $('#Hotel_Details').append(ResultHTML); } function CheckDateArray(datestr) { if(DateArray.indexOf(datestr) > -1) return true; else return false; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <div id="Hotel_Details"></div> 

Answer 2

純VanillaJS方式。

嘗試這個：

 var json_data = [ { "date": "2018-07-01", "hotel": "Hotel1", "room": "H1Room1", "qty": 3 }, { "date": "2018-07-02", "hotel": "Hotel1", "room": "H1Room1", "qty": 3 }, { "date": "2018-07-03", "hotel": "Hotel1", "room": "H1Room1", "qty": 2 }, { "date": "2018-07-01", "hotel": "Hotel1", "room": "H1Room2", "qty": 3 }, { "date": "2018-07-02", "hotel": "Hotel1", "room": "H1Room2", "qty": 2 }, { "date": "2018-07-01", "hotel": "Hotel2", "room": "H2Room1", "qty": 2 }, { "date": "2018-07-02", "hotel": "Hotel2", "room": "H2Room1", "qty": 1 } ]; var rows = ""; for(item in json_data) { rows += "<tr>" + "<td>" + json_data[item].date + "</td>" + "<td>" + json_data[item].hotel + "</td>" + "<td>" + json_data[item].room + "</td>" + "<td>" + json_data[item].qty + "</td>" + "</tr>"; } document.getElementById("mytable").innerHTML = rows; 

 <table id="mytable" border="1"> </table>