ReactJS material-UI tableData to parse nested JSON - json

Question

My client is ReactJS and server is Java Jersey based.
Java Jersey produces the following nested 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"
}
]
}
]
My ReactJS code is as follows:
{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],
]}
/>
))}
The response received in client side is attached in the image
Questions:
How to render nested JSON elements in ReactJS material-ui based tableData?
How to get filenames using map and index?
Please provide solution to this issue.

Answer 1

1 - First you need to decide how you will render your table. If you just want to render a single table for all your nested arrays, you can generate a single array of it and render normally. You can also render multipla tables, one for each nested array, it's your choice as a programmer.
2 - You can get filenames field by doing an simple map in fileNameObjList. But if you want a single array of filenames, you can either use Array.reduce or combine the mapped arrays with Array.concat or by pushing every item with an for loop
and also, I'm not sure but i don't think Material UI table is used that way. You may be using another data-table component that uses MUI