Question

我正在尝试根据如下所示的JSON数据创建表：

它适用于特定的JSON数据：

var items = [
{"Name":"A","Type":2,"Result":"0"},
{"Name":"A","Type":1,"Result":"1"},
{"Name":"B","Type":2,"Result":"1"},
{"Name":"B","Type":1,"Result":"0"},
]

但是，如果列（“类型”）是随机的，则无法正确创建表

var items = [
{"Name":"A","Type":5,"Result":"1"}
{"Name":"A","Type":2,"Result":"0"},
{"Name":"A","Type":1,"Result":"1"},
{"Name":"B","Type":3,"Result":"1"},
{"Name":"B","Type":2,"Result":"1"},
{"Name":"B","Type":1,"Result":"0"},
]

有人可以告诉我我的代码有什么问题吗？我想为动态JSON数据创建表，该表可能没有所有列的单元格值。使用此代码，我看不到A的第5列中的条目为1。

function get_prop(obj, prop) {
   return prop.split('.').reduce((o,k) => obj[k], obj);
}

function coll2tbl(json, row_header, col_header, cell) {
var table = {};
var row_headers = [];
var cols = {};

json.map(function(a) {
    var h = get_prop(a, row_header);
    if (h in table === false) {
        table[h] = {};
        row_headers.push(h);
    }
    var c = get_prop(a, col_header);
    cols[c] = null;
    table[h][c] = get_prop(a, cell);
});

var cells = [];
for (var row in table) {
    cells.push(Object.values(table[row]));
}
console.log('row_headers' + row_headers);
console.log('Object.keys(cols)' + Object.keys(cols));
console.log('cells' + cells);

var headerRow = '<th>' + capitalizeFirstLetter('TestName') + '</th>';
var colKeys = Object.keys(cols);
colKeys.map(function(col) {
 headerRow += '<th>' + capitalizeFirstLetter(col) + '</th>';
});

var bodyRows = '';
for (var i in cells) {
  bodyRows += '<tr>'; 
  bodyRows += '<td>' + row_headers[i] + '</td>';
  for (var j in cells[i]) {
    console.log('Processing row: ' + row_headers[i] + ' result: ' + cells[i][j] + ' i=' + i + ' j=' + j);
    bodyRows += '<td>';
    if (cells[i][j] === "1") {
      bodyRows +=  '<font color="green">' + cells[i][j] + '</font>';
    }
    else if (cells[i][j] === "0") {
      bodyRows +=  '<font color="red">' + cells[i][j] + '</font>';
    }
    else if (cells[i][j] === "-1") {
      bodyRows +=  '<font color="orange">' + cells[i][j] + '</font>';
    }
    else {
      bodyRows +=  "-";
    }
    bodyRows += '</td>';
  }
  bodyRows += '</tr>';
}

//return { row_headers, col_headers: Object.keys(cols), cells };
return ('<table> <thead><tr>' + headerRow + '</tr></thead><tbody>' + bodyRows + '</tbody></table>');
}

function capitalizeFirstLetter(string) {return 
    string.charAt(0).toUpperCase() + string.slice(1);
}

coll2tbl(items, 'Name', 'Type', 'Result');

我的桌子应该像这样：

Name 1 2 3 4 5 
A    1 1 - - 1 
B    1 1 1 - -

Answer 1

答案https://stackoverflow.com/a/52199138/10320683当然是正确的，但是如果您需要或想要坚持自己的特定代码，可以将其放在json.map下面（应该使用{{3} }，而不是forEach，因为无论如何您都不使用返回的数组）

  for (var col in cols) {
    for (row in table) {
      if (!table[row].hasOwnProperty(col)) {
        table[row][col] = "-";
      }
    }
  }

您的代码无法正常工作的原因是，通过对行进行迭代，您无法获得所有可能的类型属性，如果您检查table变量，则很清楚：{ a: {1: "1", 2: "0", 5: "1"}, b: {...}}（缺少3类型属性），因此稍后再调用Object.values(table[row])，将为您的单元格获得以下数组：["1", "0", "1"]，但是您确实有4列，因此“类型5”结果（1 ）向左移一列。

此外，您还需要小心，因为您的代码依赖于Object.values（）产生的排序，这意味着，如果您想更改列的顺序，则代码将无法工作。

将JSON数据转换为表

1 个答案: