Javascript如何格式化饼图DataTable的json值

Question

我有一个 API，它返回 100 行大量不同的 json 数据，包括 HTTP 状态：

{"data": [{"status": 409},{"status": 200},{"status": 404},{"status": 200},{"status": 200},{"status": 200}]}

我想制作一个饼图，它需要这样的 DataTable：

['status', count],
['200', 4],
['404', 1],
['409', 1]

最优雅的方式是什么？我对原生 Javascript 有点熟悉，但会接受 Jquery 或其他解决方案。

我原以为有一个简单的库 (?) 可以让我从我的 json 中选择“状态”，它会自动将其格式化为饼图（任何饼图 - 尽管我正在尝试使用 Google Charts 开始) — 但我还没有找到这样的库。

我尝试过的... 我列出了要学习如何完成的事情 ...假设没有“库”或简单的方法来选择、计数（也可能从最低到最高排序）json数据Google 或其他 pie chatrt，这看起来像一个不错的计划，还是有更好的方法？

• 创建一个以每个“状态”为元素的新数组
• 从新数组中，确定 json 中的每个唯一状态（我用 Google 搜索了几种方法来查找数组中的唯一值，还没有想出哪种方法适合我）作为另一个新数组
• 使用第一个和第二个新数组的组合，计算每个状态在 json 中出现的次数（我想我可以使用 each 或 foreach 并为每个唯一状态元素的每次出现计数 +1）李>
• 用它的计数格式化每个唯一状态，添加括号和逗号（我想我可以在名称值对之间使用连接，所以最后一个没有额外的逗号，并且 + 使用单引号连接逗号和括号，也许)
• 将状态从低到高排序（这将用于从绿色到红色的颜色编码，其中 200 为绿色，500 为红色）
• 为每一列添加标题

感谢您的建议。

Answer 1

我相信array.reduce 循环可以解决问题。

let data = {
  "data": [{
    "status": 409
  }, {
    "status": 200
  }, {
    "status": 404
  }, {
    "status": 200
  }, {
    "status": 200
  }, {
    "status": 200
  }]
}

let newdata = data.data.reduce((accum, a) => {
 // console.log(accum, a);
  let found = 0;
  accum.forEach((el, index) => {
    if (el[0] == a.status) {
      accum[index][1]++;
      found = 1
    }
  })
  if (!found) accum.push([a.status.toString(), 1])
  return accum
}, [
  ['status', 'count']
]);

console.log(newdata)