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

以下格式的东西。 机器名称 |图像列表 |名单 |状态列表

我已经设法从下面的 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 上查看输出的行为方式