ReactJS material-UI tableData解析嵌套JSON答案

【问题标题】：ReactJS material-UI tableData to parse nested JSONReactJS material-UI tableData解析嵌套JSON
【发布时间】：2021-01-07 22:10:51
【问题描述】：

我的客户端是 ReactJS，服务器是基于 Java Jersey 的。

Java Jersey 生成以下嵌套 JSON。

[
    {
        "projectname": "BMI",
        "testRun": "5934391890034305",
        "numberOfTestcases": "3",
        "timeNowString": "Mon Sep 21 21:17:34 IST 2020",
        "oidobjList": [
            {
                "oid": "5f68cb16f01c7607230d1fcd"
            },
            {
                "oid": "5f68cb16f01c7607230d1fcf"
            },
            {
                "oid": "5f68cb16f01c7607230d1fd1"
            }
        ],
        "fileNameObjList": [
            {
                "fileName": "Basispath_BMI_0_out.gif"
            },
            {
                "fileName": "Basispath_BMI_1_out.gif"
            },
            {
                "fileName": "Basispath_BMI_2_out.gif"
            }
        ]
    },
    {
        "projectname": "BMI",
        "testRun": "3320691551029718",
        "numberOfTestcases": "3",
        "timeNowString": "Mon Sep 21 18:37:54 IST 2020",
        "oidobjList": [
            {
                "oid": "5f68a5aaf01ca8f40b42a4e7"
            },
            {
                "oid": "5f68a5aaf01ca8f40b42a4e9"
            },
            {
                "oid": "5f68a5aaf01ca8f40b42a4eb"
            }
        ],
        "fileNameObjList": [
            {
                "fileName": "Basispath_BMI_0_out.gif"
            },
            {
                "fileName": "Basispath_BMI_1_out.gif"
            },
            {
                "fileName": "Basispath_BMI_2_out.gif"
            }
        ]
    }
]

我的 ReactJS 代码如下：

{this.props.articles.map((el, index) => (                                 
    <Table
        tableHeaderColor="primary"
        tableHead={["Parameter", "Value"]}
        tableData={[                                            
            ["Project Name: ", el.projectname],
            ["Test Run: ", el.testRun],                                            
            ["No Of TestCases: ", el.numberOfTestcases],
            // ["File Name: ", el.fileNameObjList],
            ["Time Stamp: ", el.timeNowString],                                   
        ]}
    />
))}

客户端收到的响应附在图片中

问题：

如何在基于 ReactJS material-ui 的 tableData 中渲染嵌套的 JSON 元素？
如何使用 map 和 index 获取文件名？
请提供此问题的解决方案。

【问题讨论】：

标签： json reactjs html-table nested material-ui

【解决方案1】：

1 - 首先，您需要决定如何呈现您的表格。如果您只想为所有嵌套数组呈现单个表，则可以生成它的单个数组并正常呈现。您还可以渲染 multipla 表，每个嵌套数组一个，这是您作为程序员的选择。

2 - 您可以通过在fileNameObjList 中进行简单映射来获取文件名字段。但是，如果你想要一个文件名数组，你可以使用 Array.reduce 或将映射的数组与 Array.concat 或通过使用 for 循环推送每个项目

而且，我不确定，但我不认为 Material UI 表是这样使用的。您可能正在使用另一个使用 MUI 的数据表组件

【讨论】：