为 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

你也可以试试这个解决方案（有点短）：

//@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 });

Answer 2

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);
});

在此处阅读有关这些数组方法的信息：

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

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

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