Render a table with a json array in Reactjs

Question

I need to display the below jsonArray on a page in React.

[{
    "machine1": [{

            "Image": "mysql:latest",
            "Names": "mysql",
            "Status": "Restarting (1) 18 seconds ago"
        },
        {
            "Image": "kafka:latest",
            "Names": "kafka",
            "Status": "Up 15 hours"
        },
        {
            "Image": "postgresql:latest",
            "Names": "postgresql",
            "Status": "Restarting (1) 18 seconds ago"
        }
    ]
},
{
    "machine2": [{
            "Image": "mysql:latest",
            "Names": "mysql",
            "Status": "Restarting (1) 18 seconds ago"
        },
        {
            "Image": "elasticsearch:latest",
            "Names": "elasticsearch",
            "Status": "Up 15 hours"
        }
    ]
}
]

Something in the below format. MachineName | ImageList | NameList | StatusList

I have managed to display data from below json:

 {"parsedBody": [{

            "Image": "mysql:latest",
            "Names": "mysql",
            "Status": "Restarting (1) 18 seconds ago"
        },
        {
            "Image": "kafka:latest",
            "Names": "kafka",
            "Status": "Up 15 hours"
        },
        {
            "Image": "postgresql:latest",
            "Names": "postgresql",
            "Status": "Restarting (1) 18 seconds ago"
        }
    ]
   }

Below is my current code:

import React, { Component } from 'react';
import axios from 'axios';

class DockerProcess extends Component {
constructor() {
    super();
    this.state = {
        d_processes: { "parsedBody": [{ "Image": "placeholder_image", "Names": "placeholder_name" }] }
    };
}
handleButtonClick = () => {
    axios.get("/getDockerProcesses").then(response => {
        console.log(response.data);
        this.setState({
            d_processes: response.data
        });
    });
};
render() {
    return (
        <div>
            <button onClick={this.handleButtonClick}>Get Docker Processes</button>
            <ul>
                {this.state.d_processes.parsedBody.map((item, i) => {
                    return <li key={i}>{item.Names}</li>
                })}
            </ul>
        </div>
    );
}
}

export default DockerProcess;

Currently, I know the json key which is 'parsedBody' but if you see the first json body that I ve mentioned here, that is what I want to achieve and in there, the keys are different i.e. machine names like machine1, machine2, etc.

I am a newbie to frontend development so a few tips would help. Thanks.

Answer 1

Here I have modified your JSON array by removing the machine name. But still there is a way to differentiate between machiness.

    let arr = [
     [
        {    
            "Image": "mysql:latest",
            "Names": "mysql",
            "Status": "Restarting (1) 18 seconds ago"
        },
        {
            "Image": "kafka:latest",
            "Names": "kafka",
            "Status": "Up 15 hours"
        },
        {
            "Image": "postgresql:latest",
            "Names": "postgresql",
            "Status": "Restarting (1) 18 seconds ago"
        }
    ],
    [
        {
            "Image": "mysql:latest",
            "Names": "mysql",
            "Status": "Restarting (1) 18 seconds ago"
        },
        {
            "Image": "elasticsearch:latest",
            "Names": "elasticsearch",
            "Status": "Up 15 hours"
        }
    ]    
]

Then here is how to iterate through it to display every item

   <ul>
      { 
        arr.map((items, i) => {      
          return <div>{ 
            items.map((item, i) => {
              return <li key={i}>{item.Names+",  "+ item.Image}</li>
            })  }
             <h4>Next machine</h4></div>
         })
      }
   </ul>

you can see on Codesandbox how the output behaves