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
– minnieme, Commented Oct 16, 2018 at 20:52
According to me these two can be used to answer this question but OP claims they are not dupes. stackoverflow.com/questions/43985933/… and stackoverflow.com/questions/40347411/… - I have reopened. Please answer and prove me wrong — mplungjan
– mplungjan, Commented Oct 16, 2018 at 20:56

Zack · Accepted Answer · 2018-10-16 22:51:25Z

0

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;

edited Oct 16, 2018 at 22:51

answered Oct 16, 2018 at 22:23

Zack

2901 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

minnieme Over a year ago

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 Over a year ago

I was able to resolve by modifying your solution. Thanks !

Zack Over a year ago

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 · Accepted Answer · 2018-10-19 23:38:55Z

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;

Collectives™ on Stack Overflow

json conversion to html table (react)

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related