在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上查看输出的行为