转换ChartJS的JSON数据

km0tfn4u 于 2022-11-07 发布在 Chart.js

关注(0)|答案(2)|浏览(186)

我正在学习如何使用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]

我该怎么做？

chart.js

来源：https://stackoverflow.com/questions/71117190/transform-json-data-for-chartjs

2条答案

按热度按时间

wqlqzqxt1#

您也可以尝试此解决方案（略短）：

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

赞(0）回复(0）举报 2022-11-07

gxwragnw2#

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对象没有这些方法，我们使用spread操作符（...）将其转换回Array。

赞(0）回复(0）举报 2022-11-07

我来回答

转换ChartJS的JSON数据

2条答案

相关问题

热门标签

最新问答