Javascript how to format json values for pie chart DataTable

Question

I have an API that returns 100 rows of lots of different json data including HTTP Status:

{"data": [{"status": 409},{"status": 200},{"status": 404},{"status": 200},{"status": 200},{"status": 200}]}

And I want to make a pie chart which requires a DataTable like this:

['status', count],
['200', 4],
['404', 1],
['409', 1]

What is the most graceful way to accomplish this? I am somewhat familiar with vanilla Javascript but will accept Jquery or other solutions.

I would have thought there was a simple library (?) that would let me choose "status" from my json and it would automagically format it for a pie chart (any pie chart - although I'm trying Google Charts to begin) — but I have not found such a library.

What I have tried... I made a list of things to learn how to accomplish ... assuming there is no "library" or simple way to select, count (and maybe also order from lowest to highest) the json data for the Google or other pie chatrt, Does this look like a decent plan, or is there a better way?

create a new array with each "status" as an element
from the new array, determine each unique status from the json (I Googled several ways to find unique values in an array, have not figured which one will work for me yet) as yet another new array
using a combination of the first and second new arrays, count the number of times each status appears in the json (I think I can use each or foreach and count up +1 for each occurence of each unique status element)
format each unique status with its count, adding brackets and commas (I think I can use join between name value pairs, so the last one does not have an extra comma, and + concatenate with commas and brackets using single quotes, maybe)
sort the statuses low to high (this will be for color coding from green to red where 200's will be green and 500's will be red)
add the title to each column

Thank you for any advice.

Kinglish Kinglish · Accepted Answer · 2021-05-30T17:43:08

I believe an array.reduce loop will do the trick.

let data = {
  "data": [{
    "status": 409
  }, {
    "status": 200
  }, {
    "status": 404
  }, {
    "status": 200
  }, {
    "status": 200
  }, {
    "status": 200
  }]
}

let newdata = data.data.reduce((accum, a) => {
 // console.log(accum, a);
  let found = 0;
  accum.forEach((el, index) => {
    if (el[0] == a.status) {
      accum[index][1]++;
      found = 1
    }
  })
  if (!found) accum.push([a.status.toString(), 1])
  return accum
}, [
  ['status', 'count']
]);

console.log(newdata)

Javascript how to format json values for pie chart DataTable

1 Answers