json conversion to html table (react)

Question

I have data that needs to be displayed in form of HTML table like

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"
      }]
    }
  ]
}];

I want to display this data in the form of the table as shown above. I am able to fetch the column, row & value for each cell but don't know how to add this to a table..

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);
  }
}

In my case, one of the keys has to be coverted to columns and then rows have to be created / updated based on that column, but in these examples, its a direct conversion to columns and rows from data. — minnieme, Oct 16 '18 at 20:52
According to me these two can be used to answer this question but OP claims they are not dupes. https://stackoverflow.com/questions/43985933/rendering-a-table-using-reactjs and https://stackoverflow.com/questions/40347411/how-to-display-json-data-with-reactjs-in-the-table - I have reopened. Please answer and prove me wrong — mplungjan, Oct 16 '18 at 20:56

Zack · Accepted Answer · 2018-10-16T22:51:25.813

Pretty awkward, but this works:

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;

Doesnt work for irrgeular data like var json = [{"key1": "value1","tests": [{"id": "159", "results": [{"name": "A", "result": "true"},{"name": "B", "result": "false"},{"name": "C","result": "true"}]},{"id": "158", "results": [{"name": "B", "result": "false"},{"name": "C","result": "true"}]},{"id": "157", "results": [{"name": "A", "result": "true"},{"name": "C","result": "true"}]}]}]; — minnieme, Oct 17 '18 at 23:19
Cool! After struggling with it for a while, I found a way to make it much simpler by re-organizing the data into a matrix. Did you come up with something similar? (new solution posted below) — Zack, Oct 19 '18 at 23:41

score 0 · Answer 2 · answered Oct 19 '18 at 23:38

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;

json conversion to html table (react)

2 Answers2