JSON преобразование в HTML-таблицу (реагировать)

Question

У меня есть данные, которые необходимо отобразить в виде таблицы HTML, например

Name 159   158   157
A    true false false
B    false true true
C    true  true  -

var json = [{
  "key1": "value1",
  "tests": [{
      "id": "159",
      "results": [{
        "name": "A",
        "result": "true"
      }, {
        "name": "B",
        "result": "false"
      }, {
        "name": "C",
        "result": "true"
      }]
    },
    {
      "id": "158",
      "results": [{
        "name": "A",
        "result": "false"
      }, {
        "name": "B",
        "result": "true"
      }, {
        "name": "C",
        "result": "true"
      }]
    },
    {
      "id": "157",
      "results": [{
        "name": "A",
        "result": "false"
      }, {
        "name": "B",
        "result": "true"
      }]
    }
  ]
}];

Я хочу отобразить эти данные в форме таблицы, как показано выше.Я могу выбрать столбец, строку и значение для каждой ячейки, но не знаю, как добавить это в таблицу ..

for (var i = 0; i < json[0].tests.length; i++) {
  var test_json = json[0].tests[i];
  var column = test_json.id;
  for (var j = 0; j < test_json.results.length; j++) {
    var name = test_json.results[j].name;
    var result = test_json.results[j].result;
    console.log('column row result :' + column, name, result);
  }
}

Answer 1

import React, { Component } from 'react';

class App extends Component {
  render() {
    var tests = {
      'A': [],
      'B': [],
      'C': []
    };

    json[0].tests.map(({results, id}) =>
      results.forEach(({name, result}) => tests[name][id] = result)
    );

    function getRow(letter) {
      return (
        <tr>
          <td>{letter}</td>
          {
            json[0].tests.map(({id}) =>
              tests[letter].hasOwnProperty(id)
                ? <td>{tests[letter][id]}</td>
                : <td>-</td>
            )
          }
        </tr>
      )
    }

    return <table>
      <tbody>
      <tr>
        <td>Name</td>
        {json[0].tests.map(test => <td>{test.id}</td>)}
      </tr>
      {['A', 'B', 'C'].map(letter => getRow(letter))}
      </tbody>
    </table>
  }
}

export default App;

Answer 2

Довольно неловко, но это работает:

import React, { Component } from 'react';

class App extends Component {
  render() {
    var json = [
      {
        "key1": "value1",
        "tests": [
          {
            "id": "159",
            "results": [
              {
                "name": "A",
                "result": "true"
              },
              {
                "name": "B",
                "result": "false"
              },
              {
                "name": "C",
                "result": "true"
              }
            ]
          },
          {
            "id": "158",
            "results": [
              {
                "name": "A",
                "result": "false"
              },
              {
                "name": "B",
                "result": "true"
              },
              {
                "name": "C",
                "result": "true"
              }
            ]
          },
          {
            "id": "157",
            "results": [
              {
                "name": "A",
                "result": "false"
              },
              {
                "name": "B",
                "result": "true"
              }
            ]
          }
        ]
      }
    ];

    return <table>
      <tbody>
      <tr>
        <td>Name</td>
        {json[0].tests.map(test => <td>{test.id}</td>)}
      </tr>
      {
        ["A", "B", "C"].map(test => // A, B, C
          <tr>
            <td>{test}</td>
            {
              json[0].tests.map(({results}) => // 159, 158, 157
                results.filter(result => result.name === test)
                  .map(testname => <td>{testname.result}</td>))
            }
          </tr>
        )
      }
      </tbody>
    </table>
  }
}

export default App;