javascript - 计算 JSON 中的值并将其转换为数字形式

Question

这个问题已经有答案了:

Better way to sum a property value in an array (20 个回答)

已关闭 5 年前。

我正在尝试弄清楚如何计算非常大的 JSON 文件中的不同值。

下面我包含了 10,000 多行 JSON 文件中的一小部分。我需要以数字形式统计 "status":"booked" 和 "status":"free" 的总金额。

[
  {
    "eventId": 126363,
    "eventKey": "4749466",
    "objectLabelOrUuid": "uuid8083",
    "status": "booked",
    "quantity": 1,
    "ticketType": null,
    "holdTokenHash": null,
    "version": 3,
    "extraData": null
  },
  {
    "eventId": 126363,
    "eventKey": "4749466",
    "objectLabelOrUuid": "uuid11392",
    "status": "free",
    "quantity": 0,
    "ticketType": null,
    "holdTokenHash": null,
    "version": 6,
    "extraData": null
  },
  {
    "eventId": 126363,
    "eventKey": "4749466",
    "objectLabelOrUuid": "uuid8051",
    "status": "booked",
    "quantity": 1,
    "ticketType": null,
    "holdTokenHash": null,
    "version": 2,
    "extraData": null
  }
]

将它们转换为数字形式后，我会将这些值放入 html 文档中

Seats Booked: <a id="booked"></a> Seats Free: <a id="free"></a>

预期输出:

Seats Booked: 2 Seats Free: 1

据我了解，我可以使用 foreach 方法来获取数据，但我无法对它们进行计数。如果您有任何想法或最好的文档可以链接到这里，请在这里告诉我!

Answer 1

您可以在迭代时对它们进行计数。

要将值分配给元素，您可以获取对象的所有条目并使用键作为 id 并将值分配给元素。

使用的技术:

• Array#forEach用于迭代数组，
• destructuring assignment ，用于获取单个属性或稍后获取数组的两个值，
• Object.entries用于获取对象的所有键和值

var data = [{ eventId: 126363, eventKey: "4749466", objectLabelOrUuid: "uuid8083", status: "booked", quantity: 1, ticketType: null, holdTokenHash: null, version: 3, extraData: null }, { eventId: 126363, eventKey: "4749466", objectLabelOrUuid: "uuid11392", status: "free", quantity: 0, ticketType: null, holdTokenHash: null, version: 6, extraData: null }, { eventId: 126363, eventKey: "4749466", objectLabelOrUuid: "uuid8051", status: "booked", quantity: 1, ticketType: null, holdTokenHash: null, version: 2, extraData: null }],
    count = { booked: 0, free: 0 };

window.onload = function() {
    data.forEach(({ status }) => count[status]++);
    Object.entries(count).forEach(([id, value]) =>
        document.getElementById(id).innerHTML = value);
};

Seats Booked: <a id="booked"></a> Seats Free: <a id="free"></a>