Convert JSON information for use in ChartJS

Question

Convert JSON information for use in ChartJS

I've been delving into the world of ChartJs and have encountered a bit of a roadblock. I'm looking to decipher how to convert JSON data into labels and data for a bar chart.

The JSON data consists of an array of product orders. With varying numbers of products, I need to sift through and compile a list of products for the ChartJS labels. Following that, I need to tally how many times each product appears in the JSON in order to determine the number of times each product was sold.

[

{
    "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"
  }

  ]

I aim to generate two arrays for the product labels and order counts

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

Any guidance on the best way to accomplish this task?

javascript chart.js

Answer 1

Answer №1

Here's a slightly shorter solution that you can also try:

//@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

Here's a slightly shorter solution that you can also try:

//@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 3

Answer №2

let items = [

    {
        "item_id": 1,
        "item_name": "banana"
    },
    {
        "item_id": 2,
        "item_name": "grapes"
    },
    {
        "item_id": 3,
        "item_name": "grapes"
    },
    {
        "item_id": 4,
        "item_name": "bicycle"
    },
    {
        "item_id": 5,
        "item_name": "flashlight"
    },
    {
        "item_id": 6,
        "item_name": "banana"
    },
    {
        "item_id": 7,
        "item_name": "watermelon"
    },
    {
        "item_id": 8,
        "item_name": "bicycle"
    },
    {
        "item_id": 9,
        "item_name": "grapes"
    },
    {
        "item_id": 10,
        "item_name": "grapes"
    }

];

const categories = [...new Set(items.map(value => value.item_name))];
const quantities = categories.map(value => {
    return items.reduce((previousValue, currentValue) =>  {
        console.log(currentValue);
        if (currentValue.item_name === value) {
            return previousValue + 1;
        }
        else {
            return  previousValue;
        }
    }, 0);
});

Learn more about these array methods here:

The Set is utilized to extract only the unique values in an array: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/Set

Since the Set object lacks certain methods, we convert it back to an Array using the spread operator (...)

Answer 4

let items = [

    {
        "item_id": 1,
        "item_name": "banana"
    },
    {
        "item_id": 2,
        "item_name": "grapes"
    },
    {
        "item_id": 3,
        "item_name": "grapes"
    },
    {
        "item_id": 4,
        "item_name": "bicycle"
    },
    {
        "item_id": 5,
        "item_name": "flashlight"
    },
    {
        "item_id": 6,
        "item_name": "banana"
    },
    {
        "item_id": 7,
        "item_name": "watermelon"
    },
    {
        "item_id": 8,
        "item_name": "bicycle"
    },
    {
        "item_id": 9,
        "item_name": "grapes"
    },
    {
        "item_id": 10,
        "item_name": "grapes"
    }

];

const categories = [...new Set(items.map(value => value.item_name))];
const quantities = categories.map(value => {
    return items.reduce((previousValue, currentValue) =>  {
        console.log(currentValue);
        if (currentValue.item_name === value) {
            return previousValue + 1;
        }
        else {
            return  previousValue;
        }
    }, 0);
});

Learn more about these array methods here:

The Set is utilized to extract only the unique values in an array: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/Set

Since the Set object lacks certain methods, we convert it back to an Array using the spread operator (...)

Convert JSON information for use in ChartJS

Answer №1

Answer №2

Similar questions

Laravel: Input information into a form containing multiple dropdown menus

Using AngularJS ng-repeat to pass href links

Press the key to navigate to a different page

Verify the type of email domain (personal or corporate)

Is there a way to convert time measurements like minutes, hours, or days into seconds in React and then pass that information to an

The use of Handlebars expressions within the {{#each}} block is crucial

What could be causing me to receive no results?

initiate a page refresh upon selecting a particular checkbox

Oops! The regular expression flag "ajax" in Javascript is not valid and is causing

Adding Axios package to a Vue 3 project without using the CLI

Altering the DOM directly within the componentDidMount() lifecycle method without needing to use

Add or remove an ID from the swatch gallery based on its presence or absence

The functionality of jQuery on dropdown list change seems to be malfunctioning in Codeigniter

Having trouble getting Fullcalendar to show up on my cordova app

Deploying an Angular application created using Yeoman to Heroku

Modify the color of the components in Select from Material-UI

Load a form using ajax and submit it using jQuery

Rotation Causes Vertices to Deviate from Expected Axis Movement

The Next.js application encounters a crash when trying to integrate Google Firebase authentication

The PHP AJAX call is returning an undefined response status