将JSON数据转换为表

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数据创建表，该表可能没有所有列的单元格值。使用此代码，我在第5列中看不到A为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下面（顺便说一句，使用forEach而不是map，因为你不使用返回的数组）

  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（）生成的排序，这意味着如果您想要更改列的顺序，您的代码将无法正常工作。