Javascript 将复杂的json数据解析到material ui表中

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

---

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

表格标题：

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

Util函数：

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>

{headers.map（text=>(
{text}
))}
{Object.key（数据[“标识符]）.map（key=>(
{key}
{Object.keys（data[“identifier”][key]）.map（s=>(
{s}
{data[“identifier”][key][s].split}
{Object.keys（数据[“标识符”][key][s][“返回值”]）.map(
（r，i）=>(
{r}
{data[“identifier”][key][s][“return_value”][r]}
)
)}
))}
))}

您至少需要尝试并发布代码，以便我们为您提供帮助。哦，我确实尝试过，但我认为发布失败的尝试没有帮助。不过我会添加。事实上，这比发布的图片更有帮助。@user1538301我已经添加了codesanbox url，您可以查看一下吗。

<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>