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-07-03
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>

如何使用javascript将数据排序到表格中？

2 个答案: