在Reactjs中使用json数组呈现一个表

Question

我需要在React的页面上显示下面的jsonArray。

[{
"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"
}
]
}
]

格式如下。MachineName | ImageList | NameList | StatusList

我已经设法从下面显示数据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"
}
]
}

下面是我当前的代码:

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;

目前，我知道json键是'parsedBody'但如果你看到我在这里提到的第一个json体，这就是我想要实现的，在那里，键是不同的，即机器名称，如machine1 machine2等

我是一个前端开发的新手，所以一些技巧会有所帮助。谢谢。

Answer 1

这里我通过删除机器名称修改了JSON数组。但是仍然有一种方法可以区分机器性。

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"
}
]    
]

下面是如何遍历它以显示每个 项

<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>

你可以在Codesandbox上看到输出的行为