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.

Can You post a code that you've managed to display. I will try to help you based on that — Abdulhakim Zeinu
– Abdulhakim Zeinu, Commented Mar 10, 2021 at 16:40
@SowmiyaP 'machine1' is just a sample. The actual names are quite different. — T Anna
– T Anna, Commented Mar 10, 2021 at 17:05

Abdulhakim Zeinu · Accepted Answer · 2021-03-10 19:00:49Z

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

answered Mar 10, 2021 at 19:00

Abdulhakim Zeinu

3,8712 gold badges37 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

T Anna Over a year ago

Thank so much for this. I've used your solution plus I've updated the json structure such that there is a key called 'machine' in every object in the json with the value as the actual machine name and then another key called 'processes' with the list of processes. I ve achieved what I wanted. Thanks again.

Collectives™ on Stack Overflow

Render a table with a json array in Reactjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related