Question

我的数据看起来像这样......

    errorTypes = ["newview","oldview","noview","someview"]
    var myData = [
      [{
        "timeBucket": 1472058000000,
        "errors": 534,
        "errorFree": 0,
        "business": 0,
        "errorRate": 1.0,
        "breakdown": [{
          "type": "newview",
          "count": 359,
          "errorRate": 1.0
        }, {
          "type": "oldview",
          "count": 169,
          "errorRate": 1.0
        }, {
          "type": "noview",
          "count": 6,
          "errorRate": 1.0
        }]
      }],
      [{
        "timeBucket": 1472061600000,
        "errors": 537,
        "errorFree": 0,
        "business": 0,
        "errorRate": 1.0,
        "breakdown": [{
          "type": "newview",
          "count": 338,
          "errorRate": 1.0
        }, {
          "type": "oldview",
          "count": 184,
          "errorRate": 1.0
        }, {
          "type": "noview",
          "count": 14,
          "errorRate": 1.0
        }, {
          "type": "someview",
          "count": 1,
          "errorRate": 1.0
        }]
      }]
    ];

我开始通过下面的方法解构JSON，但它给了我多个对象，这是原始的，所以我认为它可能走向错误的方式......（以timeBucket作为第一个元素）

var result = [];

errorTypes.map( function (item) {
myData.forEach(function(ele, idx) {
  var count = ele[0].breakdown.filter(function(ele, idx) {
    return ele.type == item;
  })[0];
  count = (count === undefined) ? 0 : +count.count
  result.push(
    [ele[0].timeBucket, parseFloat(ele[0].errors), count]);
  });

});

console.log(result);

结果......

[[1472058000000, 534, 359], [1472061600000, 537, 338], [1472058000000, 534, 169], [1472061600000, 537, 184], [1472058000000, 534, 6], [1472061600000, 537, 14], [1472058000000, 534, 0], [1472061600000, 537, 1]]

我需要创建的是一个看起来像这样的表....

<TABLE BORDER=1>
<TR><TD>Error</TD><TD>1472058000000</TD><TD>1472061600000</TD></TR>
<TR><TD>newview</TD><TD>359</TD><TD>338</TD></TR>
<TR><TD>oldview</TD><TD>169</TD><TD>184</TD></TR>
<TR><TD>noview</TD><TD>6</TD><TD>14</TD></TR>
<TR><TD>someview</TD><TD>0</TD><TD>1</TD></TR>
<TR><TD>TOTALS</TD><TD>534</TD><TD>537</TD></TR>
</TABLE>

我在这里有一个JSFiddle：https://jsfiddle.net/wilkiejane/1k1tbmxy/

通常，作为一名新手Python开发人员，我只是在其上使用pandas并完成，但我们的HTML开发人员又完成了另一份工作，所以现在我是IT＆＃34;团队＆＃34;。 :-( 我不需要做任何类型的制表，它只是对数据进行排序，而一系列匿名数组只是让我感到困惑。有人对我如何解决这个问题有任何建议吗？非常感谢！ JW

Answer 1

我意识到你有一个解决方案，但我仍然希望发布以下使用ES6功能的代码：

// Create 2D array:
var arr = [
    ["Errors", ...myData.map( ([rec]) => rec.timeBucket )], 
    ...errorTypes.map( type => 
        [type,...myData.map( ([rec]) => 
            (rec.breakdown.find( err => err.type == type ) || {}).count || 0 )]), 
    ["TOTALS", ...myData.map( ([rec]) => rec.errors ) ]];

// Convert 2D array to HTML string:
var tbl = `<TABLE>
${arr.map( row => `<TR>${row.map( cell => `<TD>${cell}</TD>` ).join('')}</TR>
` ).join('')}</TABLE>`;

tbl 变量的内容是（对于提供的样本数据）：

<TABLE>
<TR><TD>Errors</TD><TD>1472058000000</TD><TD>1472061600000</TD></TR>
<TR><TD>newview</TD><TD>359</TD><TD>338</TD></TR>
<TR><TD>oldview</TD><TD>169</TD><TD>184</TD></TR>
<TR><TD>noview</TD><TD>6</TD><TD>14</TD></TR>
<TR><TD>someview</TD><TD>0</TD><TD>1</TD></TR>
<TR><TD>TOTALS</TD><TD>534</TD><TD>537</TD></TR>
</TABLE>

＆＃13;

var myData = [
      [{
        "timeBucket": 1472058000000,
        "errors": 534,
        "errorFree": 0,
        "business": 0,
        "errorRate": 1.0,
        "breakdown": [{
          "type": "newview",
          "count": 359,
          "errorRate": 1.0
        }, {
          "type": "oldview",
          "count": 169,
          "errorRate": 1.0
        }, {
          "type": "noview",
          "count": 6,
          "errorRate": 1.0
        }]
      }],
      [{
        "timeBucket": 1472061600000,
        "errors": 537,
        "errorFree": 0,
        "business": 0,
        "errorRate": 1.0,
        "breakdown": [{
          "type": "newview",
          "count": 338,
          "errorRate": 1.0
        }, {
          "type": "oldview",
          "count": 184,
          "errorRate": 1.0
        }, {
          "type": "noview",
          "count": 14,
          "errorRate": 1.0
        }, {
          "type": "someview",
          "count": 1,
          "errorRate": 1.0
        }]
      }]
    ];
var errorTypes = ["newview","oldview","noview","someview"];

// Create 2D array:
var arr = [
    ["Errors", ...myData.map( ([rec]) => rec.timeBucket )], 
    ...errorTypes.map( type => 
        [type,...myData.map( ([rec]) => 
            (rec.breakdown.find( err => err.type == type ) || {}).count || 0 )]), 
    ["TOTALS", ...myData.map( ([rec]) => rec.errors ) ]];

// Convert 2D array to HTML string:
var tbl = `<TABLE BORDER=1>
${arr.map( row => `<TR>${row.map( cell => `<TD>${cell}</TD>` ).join('')}</TR>
` ).join('')}</TABLE>`;

// Output in snippet:
document.body.innerHTML = tbl;

＆＃13;

Answer 2

好的家伙，这一切都非常有帮助（赞成所有回复），因为数据的迭代让我感到困惑，但答案是在垂直而不是水平上格式化timebucket。我以为我只能通过一次传球，但事实证明我不能。我提醒的是，JSON是以文本字符串发出的，因此可按其顺序进行预测。（像脚本开发人员一样思考，我的区块认为JSON就像哈希并且不可预测）。

所以我在这里的jsfiddle上发布了答案：https://jsfiddle.net/wilkiejane/966sjb6k/

HTML

Security Groups

JS

<div id="table"></div>

像往常一样，SO社区是最大的资源之一，我不能够感谢你。

Answer 3

这可能是一种可能的解决方案：

var result = myData.map(function(data){
  var res = [data[0].timeBucket];
  var total = 0;

  data[0].breakdown.forEach(function(bd){
    if(errorTypes.indexOf(bd.type) != -1){
      res[errorTypes.indexOf(bd.type) + 1] = bd.count;
      total += bd.count;
    }  
  });

  res[1+errorTypes.length] = total;

  return res;
});

结果等于：

[
    [ 1472058000000, 359, 169, 6, undefined, 534 ],
    [ 1472061600000, 338, 184, 14, 1 , 537]
]

将此结果格式化为您要查找的html表：

var lines = ['Error', 'newview', 'oldview', 'noview', 'someview', 'TOTALS'];

table = '<TABLE>' + 
  lines.map(function(line, i){
    line = '<TR><TD>' + line + '</TD>'
    result.forEach(function(res){
      line += '<TD>' + (res[i] || 0) + '</TD>';
    })
    line += '</TR>'
    return line;
}).join("") + '</TABLE>'

和小提琴：https://jsfiddle.net/vp4399au/

从JSON迭代创建表。最好的方法？

3 个答案: