Jquery - 计算 JSON 对象答案

【问题标题】：Jquery - Counting JSON objectsJquery - 计算 JSON 对象
【发布时间】：2016-01-31 18:12:34
【问题描述】：

我正在研究图表系统，我正在从 ajax json 响应中获取我的数据。我只是想计算某些 JSON 对象并将它们分组。

例如，我试图循环每个 JSON 对象并将所有颜色（红色、蓝色、黄色）分成组，在这些组中我想按月划分结果。然后我可以抓取结果并将其放入我的图表。

我目前收到错误：

Cannot set property '2016-10' of undefined

这是我试图完成的一个例子。 https://jsfiddle.net/awo5aaqb/5/

这是导致我出现问题的代码：

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']];

我知道目前的代码非常笨拙，但有人知道更好的方法吗？

【问题讨论】：

有助于显示有问题的样本输入和预期结果。
看看underscore.js中的groupBy函数。我认为它至少应该为你做一些工作。
如果我理解您的问题，“更好的方法”绝对是您所需要的。

标签： javascript jquery json highcharts

【解决方案1】：

它失败是因为如果颜色不是红色，它会转到 else 并尝试设置对象，但没有创建对象。

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...

所以将第一个 hasOwnProperty 检查移到 if 之外，因为 if 和 else 都需要它。

【讨论】：

我试了一下，但现在我得到“未捕获的类型错误：无法读取未定义的属性 '2015-01'”，因为 2015 不包含黄色或蓝色。我要重新考虑一下。这是我到目前为止得到的：jsfiddle.net/awo5aaqb/18

【解决方案2】：

与其重新发明轮子，不如尝试以这种方式解决问题：

按对象的属性对对象进行分组是一项常见任务。有很多图书馆可以帮助解决这个问题。

groupBy（来自下划线网站的文档）

将集合拆分为集合，按每个集合的运行结果分组通过迭代的值。如果 iteratee 是字符串而不是函数，按每个值上由 iteratee 命名的属性分组。

_.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?

【讨论】：

这很有趣，以前从未使用过下划线，但对此我不屑一顾。谢谢。
如果这是您问题的正确答案，请接受。

【解决方案3】：

如果你想要简单的出路

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

【讨论】：