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", …}

数据必须采用这种精确格式，否则图形将无法读取。我猜我需要做一个初始的地图功能，但是在如何安排它上却陷入了困境。我的输出中不能包含任何div或引号。这可行吗？我已经搜寻了董事会和Google几天了，还无法完成这项工作。

这是我从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} />;
    }
}

React Axios获取调用以输出JSON格式

1 个答案: