React Axios 调用输出 JSON 格式

Question

我正在 React 组件中执行 Axios get 调用以检索 JSON 信息。该功能运行良好。 JSON 中有一个用于各种网络端口的标签，它们在我的 axios 调用中以数组的形式返回。这些最终将在 d3 图表上显示为节点。我的问题是我需要将从 get 调用中提取的数据输出为以下格式：

nodes: [
    { id: 'JSON data.label here' },
    { id: 'JSON data.label here' },
    { id: 'JSON data.label here' },
    { id: 'JSON data.label here' },
    { id: 'JSON data.label here' }
]

所以要读取的图表的完整组件是：

export const data = {
    nodes: [
        { id: 'JSON data.label here' },
        { id: 'JSON data.label here' },
        { id: 'JSON data.label here' },
        { id: 'JSON data.label here' },
        { id: 'JSON data.label here' }
    ]
}

这是我正在使用的 Axios 获取的格式：

axios.get(`NetworkConstruct.json`)
      .then(res => {
        const names = res.data.items;
        this.setState({ names });            
       });

这是我收到的一个示例输出（其中有 11 个）：

{id: "5bc0860c-ece1-461c-bac0-b155a3cacd82", label: "80.107.0.212",  
resourceTypeId: "tosca.resourceTypes.NetworkConstruct", productId: 
"5bc0835c-6cfa-486e-8429-a59eaf4118bc", tenantId: "393fa8da-61fd-458c-80f9- 
ce92d0ef0330", …}

数据必须采用这种 EXACT 格式，否则图表将无法读取。我猜我需要做一个初始地图功能，但我一直坚持如何安排它。我的输出中不能有任何 div 或引号。这是可行的吗？我已经搜索了几天的董事会和谷歌，但还不能完成这项工作。

这是我从 GET 请求中收到的对象。

{
    "id": "5bd2c6ef-6009-4b90-9156-62168f3c6293",
    "resourceId": "5bd0ba82-2994-455d-8716-2adb5694d6f0",
    "interface": "getGraph",
    "inputs": {},
    "outputs": {
       "graph": {
            "nodes": [
                {
                    "id": "5bcdf06c-dd53-4335-840f-55a4b8d85a2d",
                "name": "asw-lab9306b",
                "ports": {
                    "GigabitEthernet3/0/8": "5bd1777f-0ab9-4552-962b-9e306ce378ab",
                    "GigabitEthernet2/0/15": "5bd1777e-119c-44e8-ba69-0d86a481c0f5",
                    "GigabitEthernet3/0/47": "5bd17783-be94-4aaf-8858-70e4eb3d02dc",
                    "GigabitEthernet2/0/13": "5bd17783-ed99-453f-a958-f764edaa8da8"
                }                                
            }
        ],
        "links": [
            {
                "a": "5bd1a467-13f2-4294-a768-561187b278a8",
                "z": "5bd17770-2e6c-4c37-93c8-44e3eb3db6dd",
                "layer": "ETHERNET"
            },                
            {
                "a": "5bd1776e-c110-4086-87d6-a374ccee419a",
                "z": "5bd17770-83ee-4e10-b5bb-19814f9f5dad",
                "layer": "ETHERNET"
            }
        ]
    }
},
    "state": "successful",
    "reason": "",
    "progress": [],
    "providerData": {},
    "createdAt": "2018-10-26T07:49:03.484Z",
    "updatedAt": "2018-10-26T07:49:25.425Z",
    "resourceStateConstraints": {},
    "executionGroup": "lifecycle"
}

我需要的信息是节点 ID。完整对象中有 11 个。

Answer 1

您可以使用Array.prototype.map() 将一个对象数组映射到您的格式中的另一个对象数组。假设 data 是您响应中的对象列表：

class Graph extends React.Component {
    state = {
        nodes: null,
    };

    componentDidMount() {
        axios.get('the url').then(response => {
            const nodes = response.data.outputs.graph.nodes;
            this.setState({nodes});
        });
     }

    render() {
        const {nodes} = this.state;

        if (!nodes) return 'Loading...'

        return <TheD3ComponentYouUse nodes={nodes} />;
    }
}