为 ChartJS 转换 JSON 数据

Question

我正在学习如何使用 ChartJs，但遇到了瓶颈。我需要弄清楚如何将 JSON 转换为条形图的标签和数据。

JSON 是订单的产品数组。可能有任意数量的产品，因此我需要过滤并为 ChartJS 标签建立一个产品列表。然后我需要计算该产品在 JSON 中出现的次数以确定这些产品中有多少已售出。

[

{
    "order_id": 1,
    "product_name": "apple"
  },
  {
    "order_id": 2,
    "product_name": "orange"
  },
  {
    "order_id": 3,
    "product_name": "orange"
  },
  {
    "order_id": 4,
    "product_name": "monster truck"
  },
  {
    "order_id": 5,
    "product_name": "spark plug"
  },
  {
    "order_id": 6,
    "product_name": "apple"
  },
  {
    "order_id": 7,
    "product_name": "can of peaches"
  },
  {
    "order_id": 8,
    "product_name": "monster truck"
  },
  {
    "order_id": 9,
    "product_name": "orange"
  },
  {
    "order_id": 10,
    "product_name": "orange"
  }

  ]

我希望为产品标签和产品订单创建两个数组

Labels: ["apple", "orange", "monster truck", "spark plug", "can of peaches"]
Orders: [2, 4, 2, 1, 1]

我该怎么做？

Answer 1

const array = [

    {
        "order_id": 1,
        "product_name": "apple"
    },
    {
        "order_id": 2,
        "product_name": "orange"
    },
    {
        "order_id": 3,
        "product_name": "orange"
    },
    {
        "order_id": 4,
        "product_name": "monster truck"
    },
    {
        "order_id": 5,
        "product_name": "spark plug"
    },
    {
        "order_id": 6,
        "product_name": "apple"
    },
    {
        "order_id": 7,
        "product_name": "can of peaches"
    },
    {
        "order_id": 8,
        "product_name": "monster truck"
    },
    {
        "order_id": 9,
        "product_name": "orange"
    },
    {
        "order_id": 10,
        "product_name": "orange"
    }

];

const labels = [...new Set(array.map(value => value.product_name))];
const orders = labels.map(value => {
    return array.reduce((previousValue, currentValue) =>  {
        console.log(currentValue);
        if (currentValue.product_name === value) {
            return previousValue + 1;
        }
        else {
            return  previousValue;
        }
    }, 0);
});

在此处了解这些数组方法：

Set 仅用于获取唯一值的数组：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/Set

但是因为 Set 对象没有这些方法，我们使用扩展运算符 (...) 将其转换回数组

Answer 2

您也可以试试这个解决方案（稍微短一点）：

//@ts-nocheck

const products = [
  {
    order_id: 1,
    product_name: "apple",
  },
  {
    order_id: 2,
    product_name: "orange",
  },
  {
    order_id: 3,
    product_name: "orange",
  },
  {
    order_id: 4,
    product_name: "monster truck",
  },
  {
    order_id: 5,
    product_name: "spark plug",
  },
  {
    order_id: 6,
    product_name: "apple",
  },
  {
    order_id: 7,
    product_name: "can of peaches",
  },
  {
    order_id: 8,
    product_name: "monster truck",
  },
  {
    order_id: 9,
    product_name: "orange",
  },
  {
    order_id: 10,
    product_name: "orange",
  },
];

const map = {};
products.forEach(
  (product) =>
    (map[product.product_name] = (map[product.product_name] ?? 0) + 1)
);

const Labels = Object.keys(map);
const Orders = Object.values(map);
console.log({ Labels, Orders });

为 ChartJS 转换 JSON 数据

Transform JSON data for ChartJS

javascript

chart.js