json 转换为 html 表（反应）答案

【问题标题】：json conversion to html table (react)json 转换为 html 表（反应）
【发布时间】：2019-03-21 06:32:18
【问题描述】：

我有需要以 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);
  }
}

【问题讨论】：

在我的情况下，必须将其中一个键转换为列，然后必须根据该列创建/更新行，但在这些示例中，它直接转换为从数据。
据我所知，这两个可以用来回答这个问题，但 OP 声称他们不是骗子。 stackoverflow.com/questions/43985933/… 和 stackoverflow.com/questions/40347411/… - 我重新打开了。请回答并证明我错了

标签： html arrays json reactjs

【解决方案1】：

挺尴尬的，但是这个可行：

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;

【讨论】：

不适用于不规则数据，例如 var json = [{"key1": "value1","tests": [{"id": "159", "results": [{"name" ：“A”，“结果”：“真”}，{“名称”：“B”，“结果”：“假”}，{“名称”：“C”，“结果”：“真”}] }，{“id”：“158”，“结果”：[{“名称”：“B”，“结果”：“假”}，{“名称”：“C”，“结果”：“真” }]},{"id": "157", "results": [{"name": "A", "result": "true"},{"name": "C","result": "真"}]}]}];
我能够通过修改您的解决方案来解决。谢谢！
酷！经过一段时间的努力，我找到了一种方法，通过将数据重新组织成矩阵来使其变得更简单。你有没有想出类似的东西？（下面发布的新解决方案）

【解决方案2】：

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;

【讨论】：