Реагировать на Axios Get Call для вывода формата JSON

Question

Я выполняю вызов get Axios в React Component для получения информации 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"
}

ИнформацияМне нужно это идентификатор узла.В полном объекте их одиннадцать.

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} />;
    }
}