Estoy aprendiendo a usar ChartJs y me he topado con una pared. Necesito descubrir cómo transformar JSON en etiquetas y datos para un gráfico de barras.
El JSON es una matriz de productos de pedidos. Puede haber cualquier cantidad de productos, por lo que necesito filtrar y crear una lista de productos para las etiquetas de ChartJS. Luego necesito contar cuántas veces aparece el producto en el JSON para determinar cuántos de esos productos se vendieron.
[ { "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" } ]Espero crear dos matrices para las etiquetas de productos y los pedidos de productos.
Labels: ["apple", "orange", "monster truck", "spark plug", "can of peaches"] Orders: [2, 4, 2, 1, 1]¿Cómo puedo hacer esto?
También puedes probar esta solución (un poco más corta):
//@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 });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); });Lea acerca de estos métodos de matriz aquí:
El conjunto se usa solo para obtener una matriz de valores únicos: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/Set
Pero debido a que el objeto Set no tiene estos métodos, lo transformamos nuevamente en un Array usando el operador de propagación (...)