使用Javascript将数据组织到表中

使用Javascript将数据组织到表中,javascript,jquery,mongoose,datatables,frameworks,Javascript,Jquery,Mongoose,Datatables,Frameworks,我需要整理和组织大约5k个文档,从mongodb、express到ejs模板。我已经能够成功地将文档放到ejs模板中,但是我在如何处理项目的第二部分——组织数据方面遇到了困难 下面是我的数据的外观示例。我的目标是在最左边的一栏列出所有的defectlocation(总共大约30个),并根据每年和每月统计defectlocation发生的次数。我并不反对使用框架或jquery。我能想到的唯一一件事是为每个单元分配一个函数,该函数在数组中迭代,以查看它是否符合该单元的要求。(但这似乎违背了编程的本意

我需要整理和组织大约5k个文档,从mongodb、express到ejs模板。我已经能够成功地将文档放到ejs模板中,但是我在如何处理项目的第二部分——组织数据方面遇到了困难

下面是我的数据的外观示例。我的目标是在最左边的一栏列出所有的defectlocation(总共大约30个),并根据每年和每月统计defectlocation发生的次数。我并不反对使用框架或jquery。我能想到的唯一一件事是为每个单元分配一个函数,该函数在数组中迭代,以查看它是否符合该单元的要求。(但这似乎违背了编程的本意)。最后,我想添加图表,但在这一点上,这似乎真的很牵强。需要补充的一点是,这不是我将使用的唯一日期范围,它们可以追溯到2012年到2017年

  [{
    "_id": "59cee5ce8ffdc0134854f0c1",
    "repairorder": 7192822,
    "month": 2,
    "year": 2015,
    "defectlocation": "MB"
  }, {
    "_id": "59cee5ce8ffdc0134854f0c2",
    "repairorder": 7192822,
    "month": 5,
    "year": 2015,
    "defectlocation": "COVER/HOUSING"
  }, {
    "_id": "59cee5ce8ffdc0134854f0c3",
    "repairorder": 7192822,
    "month": 2,
    "year": 2015,
    "defectlocation": "MB"
  }, {
    "_id": "59cee5ce8ffdc0134854f0c5",
    "repairorder": 7192822,
    "month": 3,
    "year": 2015,
    "defectlocation": "TOUCH PAD"
  }, {
    "_id": "59cee5ce8ffdc0134854f0c6",
    "repairorder": 7192822,
    "month": 4,
    "year": 2015,
    "defectlocation": "MB"
  }]
下面是我需要它的显示方式:

  -----------------------------------------------------------------------
  Defect Location | 01-2015 |  02-2015 |  03-2015 |  04-2015 |  05-2015 |
  -----------------------------------------------------------------------
  MB              |         |    2     |          |    1     |          |
  -----------------------------------------------------------------------
  Touch Pad       |         |          |     1    |          |          |
  -----------------------------------------------------------------------
  Cover/ Housing  |         |          |          |          |     1    |
  -----------------------------------------------------------------------
  TOTAL           |         |     2    |     1    |     1    |     1    |

其主要思想是将数据重新构建到一个数据结构中,您可以轻松地使用它来构建理想的表

让我们将对象数组更改为嵌套对象:

var deflects = {
    'MB': {
        '02-2015': 2,
        '04-2015': 1
    },
    'TOUCH PAD':  {
        '03-2015': 1
    }
    'COVER/HOUSING': {
        '05-2015': 1
    },
    'TOTAL': {
        '02-2015': 2,
        '03-2015': 1,
        '04-2015': 1,
        '05-2015': 1
    }
};
var数据=[{
“_id”:“59cee5ce8ffdc0134854f0c1”,
“维修订单”:7192822,
“月”:2,
“年份”:2015年,
“位置”:“MB”
}, {
“_id”:“59cee5ce8ffdc0134854f0c2”,
“维修订单”:7192822,
“月”:5,
“年份”:2015年,
“缺陷位置”:“盖子/外壳”
}, {
“_id”:“59cee5ce8ffdc0134854f0c3”,
“维修订单”:7192822,
“月”:2,
“年份”:2015年,
“位置”:“MB”
}, {
“_id”:“59cee5ce8ffdc0134854f0c5”,
“维修订单”:7192822,
“月”:3,
“年份”:2015年,
“位置”:“触摸板”
}, {
“_id”:“59cee5ce8ffdc0134854f0c6”,
“维修订单”:7192822,
“月”:4,
“年份”:2015年,
“位置”:“MB”
}];
功能板(n,宽度,z){
z=z | |“0”;
n=n+'';
返回n.length>=width?n:新数组(width-n.length+1);
}
//第1部分:创建对象,即字典
//创建一个字典,其中每个键都是位置
//它的价值是另一本字典;
//每个内部字典将为找到的每个日期都有一个键
//以及它作为计数器的价值
var缺陷={};
//让我们创建另一个用于理货的内部字典
缺陷总数={};
data.forEach(函数(d){
如果(!defects.hasOwnProperty(d.defectlocation)){
缺陷[d.defectlocation]={};
}
风险值日期=pad(d.月,2)+'-'+d.年;
如果(!缺陷[d.defectlocation].hasOwnProperty(日期)){
缺陷[d.defectlocation][date]=0;
}
缺陷【d.缺陷位置】【日期】+;
如果(!defects.TOTAL.hasOwnProperty(日期)){
缺陷。总计[日期]=0;
}
缺陷。总计[日期]+;
});
var dates=Object.keys(defects.TOTAL).sort();
//你会在你的视野中传递偏差和日期
//第2部分:构建表(视图)
var html='';
html+='';
html+=‘缺陷位置’;
dates.forEach(函数(日期){
html+=''+日期+'';
});
html+='';
['MB'、'TOUCH PAD'、'COVER/HOUSING'、'TOTAL'].forEach(功能(位置){
html+='';
html+=''+位置+'';
dates.forEach(函数(日期){
html+=''+(缺陷[位置][日期]| |''+'';
});
html+='';
})
html+='';
document.getElementById('preview').innerHTML=html
表格{
边界塌陷:塌陷;
}
th,td{
边框:1px实心#000;
}
第一个孩子{
文本对齐:左对齐;
}
td:不是(第一个孩子){
文本对齐:居中;
}

听起来您的问题是如何组织数据以统计每个时间段内每个缺陷位置的实例。这会奏效的。你可以缩短这个,但我尝试使用易读的js。从结束点开始,您可以使用任何表库(如datatables.net)或手动创建一个html表,正如Mikey的回答所示。希望这有帮助

***更新:我最初忽略了总行。我已经更新了答案,将其包括在内(并作为数组中的最后一行)。我还添加了先按年再按月对列进行排序(因为您希望的最终结果示例就是这样显示的),并将代码分为两个函数,希望使其更具可读性

var data = [{
    "_id": "59cee5ce8ffdc0134854f0c1",
    "repairorder": 7192822,
    "month": 2,
    "year": 2015,
    "defectlocation": "MB"
  }, {
    "_id": "59cee5ce8ffdc0134854f0c2",
    "repairorder": 7192822,
    "month": 5,
    "year": 2015,
    "defectlocation": "COVER/HOUSING"
  }, {
    "_id": "59cee5ce8ffdc0134854f0c3",
    "repairorder": 7192822,
    "month": 2,
    "year": 2015,
    "defectlocation": "MB"
  }, {
    "_id": "59cee5ce8ffdc0134854f0c5",
    "repairorder": 7192822,
    "month": 3,
    "year": 2015,
    "defectlocation": "TOUCH PAD"
  }, {
    "_id": "59cee5ce8ffdc0134854f0c6",
    "repairorder": 7192822,
    "month": 4,
    "year": 2015,
    "defectlocation": "MB"
  }];

  var tableData = {};
  var totalRow = {};
  var allCols = [];
  var asArray = [];

  tallyInstances();
  prepForTable();

  function tallyInstances () {
    var i;
    var monthDate;
    for (i = 0; i < data.length; i++) {
      monthDate = data[i].month.toString() + '-' + data[i].year.toString();
      allCols.indexOf(monthDate) < 0 ? allCols.push(monthDate) : null;
      if (!tableData[data[i].defectlocation]) {
        tableData[data[i].defectlocation] = {}; // if our tableData object doesn't have a property for this defect location yet then add it and make it an object
      }
      if (tableData[data[i].defectlocation][monthDate]) {
        tableData[data[i].defectlocation][monthDate] ++; // if this defect location object has a property for this year/month combination already then increment it's value by one
      } else {
        tableData[data[i].defectlocation][monthDate] = 1; // if this defect location object does not have a property for this year/month combination yet then create the property and give it a value of 1
      }
      totalRow[monthDate] ? totalRow[monthDate] ++ : totalRow[monthDate] = 1; // ternary operator saying if the totalRow object already has a property for this year/month combination then increment it's value by one, otherwise create it and give it a value of 1
    }
  }

  function prepForTable () {
    allCols.sort(function(a, b) {
      var aParts = a.split("-");
      var bParts = b.split("-");
      var x = {
        month : aParts[0],
        year  : aParts[1]
      };
      var y = {
        month : bParts[0],
        year  : bParts[1]
      };
      var n = x.year - y.year;
      if (n !== 0) {
        return n;
      }
      return x.month - y.month;
    });
    var keys = Object.keys(tableData);
    var e;
    var rowObj;
    for (e = 0; e < keys.length; e++) {
      rowObj = {};
      rowObj["Defect Location"] = keys[e];
      var a;
      for (a = 0; a < allCols.length; a++) {
        rowObj[allCols[a]] = tableData[keys[e]][allCols[a]] ? tableData[keys[e]][allCols[a]] : '';
      }
      asArray.push(rowObj);
    }
    rowObj = {};
    rowObj["Defect Location"] = "TOTAL";
    var o;
    for (o = 0; o < allCols.length; o++) {
      rowObj[allCols[o]] = totalRow[allCols[o]] ? totalRow[allCols[o]] : '';
    }
    asArray.push(rowObj);
  }

  console.log("tableRows: ", JSON.stringify(asArray, null, 4));
  /*
 tableRows:  [
    {
        "Defect Location": "MB",
        "2-2015": 2,
        "3-2015": "",
        "4-2015": 1,
        "5-2015": ""
    },
    {
        "Defect Location": "COVER/HOUSING",
        "2-2015": "",
        "3-2015": "",
        "4-2015": "",
        "5-2015": 1
    },
    {
        "Defect Location": "TOUCH PAD",
        "2-2015": "",
        "3-2015": 1,
        "4-2015": "",
        "5-2015": ""
    },
    {
        "Defect Location": "TOTAL",
        "2-2015": 2,
        "3-2015": 1,
        "4-2015": 1,
        "5-2015": 1
    }
]

*/
var数据=[{
“_id”:“59cee5ce8ffdc0134854f0c1”,
“维修订单”:7192822,
“月”:2,
“年份”:2015年,
“位置”:“MB”
}, {
“_id”:“59cee5ce8ffdc0134854f0c2”,
“维修订单”:7192822,
“月”:5,
“年份”:2015年,
“缺陷位置”:“盖子/外壳”
}, {
“_id”:“59cee5ce8ffdc0134854f0c3”,
“维修订单”:7192822,
“月”:2,
“年份”:2015年,
“位置”:“MB”
}, {
“_id”:“59cee5ce8ffdc0134854f0c5”,
“维修订单”:7192822,
“月”:3,
“年份”:2015年,
“位置”:“触摸板”
}, {
“_id”:“59cee5ce8ffdc0134854f0c6”,
“维修订单”:7192822,
“月”:4,
“年份”:2015年,
“位置”:“MB”
}];
var tableData={};
var totalRow={};
var-allCols=[];
var asArray=[];
高度姿态();
prefortable();
函数高度(){
var i;
蒙氏变种;
对于(i=0;i