ReactJS Material-UI tableData解析嵌套的JSON

编程问答 2022-06-12

问题描述

我的客户端是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","timeNowString": "Mon Sep 21 18:37:54 IST 2020","oidobjList": [
            {
                "oid": "5f68a5aaf01ca8f40b42a4e7"
            },{
                "oid": "5f68a5aaf01ca8f40b42a4e9"
            },{
                "oid": "5f68a5aaf01ca8f40b42a4eb"
            }
        ],{
                "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],]}
    />
))}

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

Response received in client side

问题：

  1. 如何在基于ReactJS material-ui的tableData中呈现嵌套的JSON元素？
  2. 如何使用地图和索引获取文件名？
  3. 请提供此问题的解决方案。

解决方法

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

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

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

html-tablejsonmaterial-uinestedreactjsreactjs