时间戳

首页 > 解决方案 > 循环遍历 JSON 对象数组，同时将统计数据动态放入表中

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

问题描述

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

得分：5（优秀）；

得分：4（非常好）；

得分：3（合理）；

得分：2（差）；

得分：1（可怕）；

现在，挑战是：在数组中循环时，在表中添加统计数据。统计数据应根据shop name及其计算score。例如，在 JSON 中，我们在(storeName)同一家公司的不同地点有 2 家商店，业主想根据客户的反馈分别评估每个性能。

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

totalOfExcellence/totalOccurencesOfThisShop*100 (2/4*100)，totalOfVeryGood/totalOccurencesOfThisShop*100；totalOfVeryGood /totalOccurencesOfThisShop*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>

标签： javascriptarraysjson

解决方案

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>

推荐阅读