Jquery - Counting JSON objects

Question

Im working on a chart system and i'm grabing my data from a ajax json reponse. Im just trying to count certain JSON objects and group them into categories.

For example im trying to loop on every JSON objects and seperate all the colors (Red, Blue, Yellow) into groups and within those groups I want to divide the results by month.I could then grab the results and put it into my charts.

Im currently getting the error:

Cannot set property '2016-10' of undefined

Heres an example of what im trying to accomplish. https://jsfiddle.net/awo5aaqb/5/

Here's the code that been causing me issues:

var dateCounts_Red = {};
var dateCounts_Blue = {};
var dateCounts_Yellow = {};

data.d.results.forEach(function(element) {
  var date = element.created_date.slice(0, 7);
  var yr = date.slice(0, 4);
  var Color = element.colorvalue;

  if (Color === "Red") {
      if (!dateCounts_Red.hasOwnProperty(yr)) {
        dateCounts_Red[yr] = {}
      }
      if (!dateCounts_Red[yr].hasOwnProperty(date)) { 
        dateCounts_Red[yr][date] = 0
      }
      dateCounts_Red[yr][date]++;
  }else {dateCounts_Red[yr][date] = 0}

  if (Color === "Blue") {
      if (!dateCounts_Blue.hasOwnProperty(yr)) {
        dateCounts_Blue[yr] = {}
      }
      if (!dateCounts_Blue[yr].hasOwnProperty(date)) {
        dateCounts_Blue[yr][date] = 0
      }
      dateCounts_Blue[yr][date]++;
  }else {dateCounts_Blue[yr][date] = 0}

  if (Color === "Yellow") {
      if (!dateCounts_Yellow.hasOwnProperty(yr)) {
        dateCounts_Yellow[yr] = {}
      }
      if (!dateCounts_Yellow[yr].hasOwnProperty(date)) {
        dateCounts_Yellow[yr][date] = 0
      }
      dateCounts_Yellow[yr][date]++;
  }else {dateCounts_Yellow[yr][date] = 0}     

});

Red_yr_2015_data = [dateCounts_Red['2015']['2015-01'],dateCounts_Red['2015']['2015-02'],dateCounts_Red['2015']['2015-03'],dateCounts_Red['2015']['2015-04'],dateCounts_Red['2015']['2015-05'],dateCounts_Red['2015']['2015-06'],dateCounts_Red['2015']['2015-07'],dateCounts_Red['2015']['2015-08'],dateCounts_Red['2015']['2015-09'],dateCounts_Red['2015']['2015-10'],dateCounts_Red['2015']['2015-11'],dateCounts_Red['2015']['2015-12']]; 

Blue_yr_2015_data = [dateCounts_Blue['2015']['2015-01'],dateCounts_Blue['2015']['2015-02'],dateCounts_Blue['2015']['2015-03'],dateCounts_Blue['2015']['2015-04'],dateCounts_Blue['2015']['2015-05'],dateCounts_Blue['2015']['2015-06'],dateCounts_Blue['2015']['2015-07'],dateCounts_Blue['2015']['2015-08'],dateCounts_Blue['2015']['2015-09'],dateCounts_Blue['2015']['2015-10'],dateCounts_Blue['2015']['2015-11'],dateCounts_Blue['2015']['2015-12']]; 

Yellow_yr_2015_data = [dateCounts_Yellow['2015']['2015-01'],dateCounts_Yellow['2015']['2015-02'],dateCounts_Yellow['2015']['2015-03'],dateCounts_Yellow['2015']['2015-04'],dateCounts_Yellow['2015']['2015-05'],dateCounts_Yellow['2015']['2015-06'],dateCounts_Yellow['2015']['2015-07'],dateCounts_Yellow['2015']['2015-08'],dateCounts_Yellow['2015']['2015-09'],dateCounts_Yellow['2015']['2015-10'],dateCounts_Yellow['2015']['2015-11'],dateCounts_Yellow['2015']['2015-12']]; 


Red_yr_2016_data = [dateCounts_Red['2016']['2016-01'],dateCounts_Red['2016']['2016-02'],dateCounts_Red['2016']['2016-03'],dateCounts_Red['2016']['2016-04'],dateCounts_Red['2016']['2016-05'],dateCounts_Red['2016']['2016-06'],dateCounts_Red['2016']['2016-07'],dateCounts_Red['2016']['2016-08'],dateCounts_Red['2016']['2016-09'],dateCounts_Red['2016']['2016-10'],dateCounts_Red['2016']['2016-11'],dateCounts_Red['2016']['2016-12']]; 

Blue_yr_2016_data = [dateCounts_Blue['2016']['2016-01'],dateCounts_Blue['2016']['2016-02'],dateCounts_Blue['2016']['2016-03'],dateCounts_Blue['2016']['2016-04'],dateCounts_Blue['2016']['2016-05'],dateCounts_Blue['2016']['2016-06'],dateCounts_Blue['2016']['2016-07'],dateCounts_Blue['2016']['2016-08'],dateCounts_Blue['2016']['2016-09'],dateCounts_Blue['2016']['2016-10'],dateCounts_Blue['2016']['2016-11'],dateCounts_Blue['2016']['2016-12']]; 

Yellow_yr_2016_data = [dateCounts_Yellow['2016']['2016-01'],dateCounts_Yellow['2016']['2016-02'],dateCounts_Yellow['2016']['2016-03'],dateCounts_Yellow['2016']['2016-04'],dateCounts_Yellow['2016']['2016-05'],dateCounts_Yellow['2016']['2016-06'],dateCounts_Yellow['2016']['2016-07'],dateCounts_Yellow['2016']['2016-08'],dateCounts_Yellow['2016']['2016-09'],dateCounts_Yellow['2016']['2016-10'],dateCounts_Yellow['2016']['2016-11'],dateCounts_Yellow['2016']['2016-12']];

I know the code is very clunky at the moment, but would anyone know of a better aproach to this?

Would help to show sample input and expected results in question. — charlietfl, Jan 31 '16 at 18:17
Have a look at the groupBy function in [underscore.js](http://underscorejs.org/#groupBy). I think it should do at least some of the work for you. — whistling_marmot, Jan 31 '16 at 18:20
If I'm understanding your question, "a better approach" is definitely what you need. — activedecay, Jan 31 '16 at 18:25

score 1 · Answer 1 · edited May 23 '17 at 11:44

1

Instead of re-inventing the wheel, try wrapping your head around the problem in this fashion:

Grouping objects by an attribute of the object is a common task. There are many libraries that help with this.

groupBy (documentation from underscore website)

Splits a collection into sets, grouped by the result of running each value through iteratee. If iteratee is a string instead of a function, groups by the property named by iteratee on each of the values.

_.groupBy([1.3, 2.1, 2.4], function(num){ return Math.floor(num); });
=> {1: [1.3], 2: [2.1, 2.4]}

_.groupBy(['one', 'two', 'three'], 'length');
=> {3: ["one", "two"], 5: ["three"]}

What is the most efficient method to groupby on a javascript array of objects?

edited May 23 '17 at 11:44

Community

1
1

answered Jan 31 '16 at 18:28

activedecay

10,129
5
47
71

This is interessting, never used underscore before but ill look into this. Thanks. – Daniel Ellison Jan 31 '16 at 18:55
if this is the correct answer to your question, please accept it. – activedecay Jan 31 '16 at 19:23

score 1 · Accepted Answer · answered Jan 31 '16 at 18:28

It fails because if the color is not red, it goes to an else and tries to set the object, but the object was not created.

if (Color === "Red") {
      if (!dateCounts_Red.hasOwnProperty(yr)) {  <-- you create it here
        dateCounts_Red[yr] = {}
      }
      if (!dateCounts_Red[yr].hasOwnProperty(date)) { 
        dateCounts_Red[yr][date] = 0
      }
      dateCounts_Red[yr][date]++;
  }else {dateCounts_Red[yr][date] = 0}  <-- it needed to be set here too...

So move the first hasOwnProperty check outside of the if since both the if and else need it.

I gave this a try but now im getting "Uncaught TypeError: Cannot read property '2015-01' of undefined" because 2015 does not contain Yellow or Blue. Im going to rethink this again. Heres what i got so far: https://jsfiddle.net/awo5aaqb/18/ — Daniel Ellison, Jan 31 '16 at 18:53

score 0 · Answer 3 · answered Jan 31 '16 at 18:32

if you want the easy way out

if (Color === "Red") {
      if (!dateCounts_Red.hasOwnProperty(yr)) {  <-- you create it here
    dateCounts_Red[yr] = {}
      }
      if (!dateCounts_Red[yr].hasOwnProperty(date)) { 
    dateCounts_Red[yr][date] = 0
      }
      dateCounts_Red[yr][date]++;
  }else {dateCounts_Red[yr]={date:0}}  // set your object here, too

Jquery - Counting JSON objects

3 Answers3