将复杂的json数据解析成material-ui表答案

【问题标题】：Parse complex json data into material-ui table将复杂的json数据解析成material-ui表
【发布时间】：2020-05-08 23:27:01
【问题描述】：

如示例所示，将以下复杂的 json 数据解析为 material-ui 表。该行可以在一个框中包含单个值，也可以在单个框中包含多个行。请找到我所做的尝试，我能够获得最多 2 列的数据。 CodeSandbox

"identifier": {
        "IOS": {
            "A": {
                "split": 90,
                "return_value": {
                    "xg-boost-x1": 30,
                    "xg-boost-x2": 50,
                    "xg-boost-x3": 20
                }
            },
            "B": {
                "split": 10,
                "return_value": {
                    "xg-boost-x1": 30,
                    "xg-boost-x2": 50,
                    "xg-boost-x3": 20
                }
            }
        },
        "ANDROID": {
            "A": {
                "split": 70,
                "return_value": {
                    "xg-boost-x1": 30,
                    "xg-boost-x2": 50,
                    "xg-boost-x3": 20
                }
            },
            "B": {
                "split": 30,
                "return_value": {
                    "xg-boost-x1": 30,
                    "xg-boost-x2": 50,
                    "xg-boost-x3": 20
                }
            }
        }
    }

【问题讨论】：

您至少需要尝试一下并发布代码让我们帮助您。
哦，我确实尝试过，但我认为发布不成功的尝试不会有帮助。不过我会补充的。
实际上比张贴的图片更有帮助。
@user1538301 我已经添加了codesanbox url，请你看看。

标签： javascript reactjs html-table material-ui

【解决方案1】：

我能够找出解决方案，但我不确定这是否是解决问题的正确方法。

表头：

const headers = [
"IDENTIFIER",
"SYMBOL",
"SPLIT",
"KEY",
"VALUE"
];

实用功能：

const getTotalSpanSize = key => {
    let size = 1;
    let t = Object.keys(data["identifier"][key]);
    size += t.length;

    t.forEach(i => {
        let d = Object.keys(data["identifier"][key][i]["return_value"]);
        size += d.length;
    });

    return size;
};

const getReturnValueSpanSize = (key, sym) => {
    let size = 1;
    let d = Object.keys(data["identifier"][key][sym]["return_value"]);
    size += d.length;
    return size;
};

组件代码：

<TableContainer component={Paper}>
  <Table id="split_table" size="small">
    <TableHead>
      <TableRow>
        {headers.map(text => (
          <TableCell key={text}>{text}</TableCell>
        ))}
      </TableRow>
    </TableHead>
    <TableBody>
      {Object.keys(data["identifier"]).map(key => (
        <Fragment key={key}>
          <TableRow>
            <TableCell
              component="th"
              scope="row"
              rowSpan={getTotalSpanSize(key)}
            >
              {key}
            </TableCell>
          </TableRow>
          {Object.keys(data["identifier"][key]).map(s => (
            <Fragment key={s}>
              <TableRow key={s}>
                <TableCell
                  scope="row"
                  rowSpan={getReturnValueSpanSize(key, s)}
                >
                  {s}
                </TableCell>
                <TableCell
                  scope="row"
                  rowSpan={getReturnValueSpanSize(key, s)}
                >
                  {data["identifier"][key][s].split}
                </TableCell>
              </TableRow>
              {Object.keys(data["identifier"][key][s]["return_value"]).map(
                (r, i) => (
                  <TableRow>
                    <TableCell scope="row">{r}</TableCell>
                    <TableCell scope="row">
                      {data["identifier"][key][s]["return_value"][r]}
                    </TableCell>
                  </TableRow>
                )
              )}
            </Fragment>
          ))}
        </Fragment>
      ))}
    </TableBody>
  </Table>
</TableContainer>

【讨论】：