Question

我正在尝试从JavaScript中动态地在一个表中输出统计数据，该API包含一个JSON对象数组，其中在JSON数据中，属性得分的解释如下：

得分：5（优秀）；

得分：4（非常好）；

得分：3（合理）；

得分：2（差）；

得分：1（太糟了）；

现在，挑战在于：在数组中循环时，在表中添加统计数据。应基于shop name及其score计算统计数据。例如，在JSON中，我们在属性(storeName)中有2家商店，分别位于不同位置的同一家公司，所有者想根据客户的反馈分别评估每项绩效。

在属性和值"storeName": "Dito Savassi"的数组中，这家商店有4次出现（演算应该是这样的：

本店总数/本店总数* 100（2/4 * 100）， totalOfVeryGood / totalOccurencesOfThisShop * 100; totalOfVeryGood / totalOccurenceencesOfThisShop * 100;依此类推）。

在对"storeName": "Dito Rio de Janeiro"重复该过程之后，该过程有一行（发生1次）和totalOfVeryGood = 1; 表中的列"satisfaction"为(totalOfExcellence + totalOfVeryGood );，表中的列"Evaluation"为the number of occurence of each shop or total row for each shop。

我已经一起为所有商店制作了报告，现在这种情况下我不知道如何使它起作用。有人知道吗？

[{
    "id": 1,
    "date": "2018-09-01T13:27:57.334Z",
    "storeId": 1,
    "storeName": "Dito Savassi",
    "score": 5
  },
  {
    "id": 2,
    "date": "2018-09-01T13:27:57.334Z",
    "storeId": 2,
    "storeName": "Dito Rio de Janeiro",
    "score": 4
  },
  {
    "id": 3,
    "date": "2018-09-02T13:27:57.334Z",
    "storeId": 1,
    "storeName": "Dito Savassi",
    "score": 5
  },
  {
    "id": 4,
    "date": "2018-09-3T13:27:57.334Z",
    "storeId": 1,
    "storeName": "Dito Savassi",
    "score": 3
  },
  {
    "id": 5,
    "date": "2018-09-03T13:27:57.334Z",
    "storeId": 1,
    "storeName": "Dito Savassi",
    "score": 2
  }
]

结果应该是这样的：

<table class="table">
  <thead>
    <tr>
      <th>Name of the shop</th>
      <th>Satisfaction</th>
      <th>Evaluation</th>
      <th>excellent</th>
      <th>Very Good</th>
      <th>Reasonable</th>
      <th>Bad</th>
      <th>horribel</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1 Dito Savassi</td>
      <td>50%</td>
      <td>4</td>
      <td>50%</td>
      <td>0%</td>
      <td>25%</td>
      <td>25%</td>
      <td>0%</td>
    </tr>
    <tr>
      <td>2 Dito Rio de Janeiro</td>
      <td>100%</td>
      <td>1</td>
      <td>0%</td>
      <td>100%</td>
      <td>0%</td>
      <td>0%</td>
      <td>0%</td>
    </tr>
  </tbody>
</table>

Answer 1

var jsonData = [{
    "id": 1,
    "date": "2018-09-01T13:27:57.334Z",
    "storeId": 1,
    "storeName": "Dito Savassi",
    "score": 5
  },
  {
    "id": 2,
    "date": "2018-09-01T13:27:57.334Z",
    "storeId": 2,
    "storeName": "Dito Rio de Janeiro",
    "score": 4
  },
  {
    "id": 3,
    "date": "2018-09-02T13:27:57.334Z",
    "storeId": 1,
    "storeName": "Dito Savassi",
    "score": 5
  },
  {
    "id": 4,
    "date": "2018-09-3T13:27:57.334Z",
    "storeId": 1,
    "storeName": "Dito Savassi",
    "score": 3
  },
  {
    "id": 5,
    "date": "2018-09-03T13:27:57.334Z",
    "storeId": 1,
    "storeName": "Dito Savassi",
    "score": 2
  }
];
var tr_data = '';
for (var key in jsonData) {
  //console.log(jsonData[key]);	
  if (jsonData.hasOwnProperty(key)) {
    console.log(jsonData[key].storeName);
    var review = '';
    switch (jsonData[key].score) {
      case 1:
        review = 'horrible';
        break;
      case 2:
        review = 'bad';
        break;
      case 3:
        review = 'Reasonable';
        break;
      case 4:
        review = 'very good';
        break;
      case 5:
        review = 'excellent';
        break;
    }
    tr_data += '<tr>' +
      '<td>' + jsonData[key].id + '</td>' +
      '<td>' + jsonData[key].date + '</td>' +
      '<td>' + jsonData[key].storeId + '</td>' +
      '<td>' + jsonData[key].storeName + '</td>' +
      '<td>' + jsonData[key].score + '</td>' +
      '<td>' + review + '</td>' +
      '</tr>';
  }
}

var htmlTable = '<table cellpadding="10" style="font-family: Tahoma, Geneva, sans-serif;border: 1px solid #1C6EA4;background-color: #EEEEEE;width: 100%;text-align: left;">' +
  '<thead>' +
  '<tr>' +
  '<th>Id</th>' +
  '<th>Date</th>' +
  '<th>Store Id</th>' +
  '<th>Store Name</th>' +
  '<th>Score</th>' +
  '<th>Review</th>' +
  ' </tr>' +
  '</thead>' +
  ' <tbody>' + tr_data + '</tbody>' +
  '</table>';
document.getElementById("resultDiv").innerHTML = htmlTable;

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div id="resultDiv"></div>
</body>

</html>

循环遍历JSON对象数组，同时将统计数据动态放入表中

1 个答案: