Need Help in the reading complex table in JSON for React tables

Expected Output //JSON

    "servers": [
        {
            "name": "virtztp01-os1-cntl2",
            "ipv4Address": "10.189.147.70",
            "ipv6Address": "2000:::00",
            "tcpPorts": [
                22
            ],
            "udpPorts": [
                53
            ],
            "isAlive": "True", 
     "portstatus" {
       "tcpPorts": [
                    {
                        "portNumber": 22,
                        "isAlive": "True"
                    },
                      {
                        "portNumber": 122,
                        "isAlive": "False"
                    }, {
                        "portNumber": 322,
                        "isAlive": "True"
                    }
                ],
                "udpPorts": [
                    {
                        "portNumber": 53,
                        "isAlive": "False"
                    },
                      {
                        "portNumber": 153,
                        "isAlive": "True"
                    },
                        {
                        "portNumber": 253,
                        "isAlive": "False"
                    }

                    }
                ]
            }
        }
    ]
}

Iam able to read the data till here

      "servers": [
        {
            "name": "virtztp01-os1-cntl2",
            "ipv4Address": "10.189.147.70",
            "ipv6Address": "2000:::00",
            "tcpPorts": [
                22
            ],
            "udpPorts": [
                53
            ],
            "isAlive": "True",[enter image description here][1]

There are multiple arrays in the next part of Json, which i am unable to read the data in react table folllowing is the rest part of json

       "portStatus": {
                "tcpPorts": [
                    {
                        "portNumber": 22,
                        "isAlive": "True"
                    },
                      {
                        "portNumber": 122,
                        "isAlive": "False"
                    }, {
                        "portNumber": 322,
                        "isAlive": "True"
                    }
                ],
                "udpPorts": [
                    {
                        "portNumber": 53,
                        "isAlive": "False"
                    },
                      {
                        "portNumber": 153,
                        "isAlive": "True"
                    },
                        {
                        "portNumber": 253,
                        "isAlive": "False"
                    }

                    }

Need help here React Tables Want to read above and display all the above arrays for corresponding first part in the react table.

1 answer

  • answered 2020-10-16 08:36 Ritesh Nahar

    In react-table to iterate over the nested data you need to use row.original.portstatus.tcpPorts. Example:

    import React from "react";
    import { render } from "react-dom";
    import ReactTable from "react-table";
    import "react-table/react-table.css";
    
    const columns = [
      {
        Header: "Name",
        accessor: "name"
      },
      {
        Header: "Ipv4Address",
        accessor: "ipv4Address"
      },
      {
        Header: "Ipv6Address",
        accessor: "ipv6Address"
      },
      {
        Header: "isAlive",
        accessor: "isAlive",
        Cell: (row) => {
          row.styles["color"] = "#fff";
          row.styles["backgroundColor"] = row.value === "True" ? "green" : "red";
          return row.value.toUpperCase();
        }
      }
    ];
    
    const subTableColumns = [
      {
        Header: "Port Number",
        accessor: "portNumber"
      },
      {
        Header: "Is Alive",
        accessor: "isAlive"
      }
    ];
    
    const subComponent = (row) => {
      return (
        <div>
          <div>TCP Ports</div>
          <ReactTable
            data={row.original.portstatus.tcpPorts}
            columns={subTableColumns}
            defaultPageSize={3}
            showPagination={false}
          />
          <br />
          <div>UDP Ports</div>
          <ReactTable
            data={row.original.portstatus.udpPorts}
            columns={subTableColumns}
            defaultPageSize={3}
            showPagination={false}
          />
        </div>
      );
    };
    
    const demoData = [
      {
        name: "virtztp01-os1-cntl2",
        ipv4Address: "10.189.147.70",
        ipv6Address: "2000:::00",
        tcpPorts: [22],
        udpPorts: [53],
        isAlive: "True",
        portstatus: {
          tcpPorts: [
            {
              portNumber: 22,
              isAlive: "True"
            },
            {
              portNumber: 122,
              isAlive: "False"
            },
            {
              portNumber: 322,
              isAlive: "True"
            }
          ],
          udpPorts: [
            {
              portNumber: 53,
              isAlive: "False"
            },
            {
              portNumber: 153,
              isAlive: "True"
            },
            {
              portNumber: 253,
              isAlive: "False"
            }
          ]
        }
      },
      {
        name: "virtztp01-os1-cntl2",
        ipv4Address: "10.189.147.70",
        ipv6Address: "2000:::00",
        tcpPorts: [22],
        udpPorts: [53],
        isAlive: "True",
        portstatus: {
          tcpPorts: [
            {
              portNumber: 22,
              isAlive: "True"
            }
          ],
          udpPorts: [
            {
              portNumber: 53,
              isAlive: "False"
            }
          ]
        }
      }
    ];
    
    class App extends React.Component {
      constructor() {
        super();
        this.state = {
          expanded: {}
        };
      }
      render() {
        return (
          <div>
            <ReactTable
              data={demoData}
              columns={columns}
              defaultPageSize={10}
              expanded={this.state.expanded}
              className="-striped -highlight"
              getTrProps={(state, rowInfo, column, instance, expanded) => {
                return {
                  onClick: (e) => {
                    // this.setState({ expanded: {} });
                    this.setState({
                      expanded: "{'" + rowInfo.viewIndex + "':'true'}"
                    });
                  }
                };
              }}
              SubComponent={subComponent}
            />
          </div>
        );
      }
    }
    
    render(<App />, document.getElementById("root"));