Конвертировать данные 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 свойство type), поэтому, вызывая Object.values(table[row]) позже, вы получите следующий массив для ваших ячеек: ["1", "0", "1"], но у вас есть 4 столбца, поэтому результат «Тип 5» (1) смещается на один столбец влево .

Кроме того, вы должны быть осторожны, потому что ваш код полагается на сортировку, которую производит Object.values ​​(), что означает, что если вы захотите изменить порядок ваших столбцов, ваш код не будет работать.