React changing array label names on map output

Question

I have a React component which is access JSON data for populate a tree component. The tree is showing nodes and ports. Here is a sample from the JSON:

"outputs": {
        "graph": {
            "nodes":[ {
                "name":"nlabme3400",
                "ports":[ {
                    "name": "GigabitEthernet 0/2", "id": "5bd350c7-d15b-4f8b-be70-18eda2bfe41a"
                }
                ,
                {
                    "name": "FastEthernet 0/19", "id": "5bd350c7-762d-4462-984b-e6f0a9edb6c7"
                }
                ,
                {
                    "name": "FastEthernet 0/21", "id": "5bd350c7-2927-43db-ae43-119b12636de6"
                }
 ],
                "id":"5bd350bf-8515-4dc2-9b12-16b221505593"
            }

I have all of this information coming in to my component via the following axios get call:

  axios.get('StepThreeFinalData.json').then(response => {
           const nodess = response.data.outputs.graph.nodes.map(({id, name, 
...children}) => ({value: id, label: name, children: children.ports}));

The output is working perfectly. However, the challenge is that I need to change the "name" and "id" tags in the children array to "label" and "value", respectively, because otherwise the label will not show up in the tree component. Not sure how to do this. Please help!

your example json does not have children. did you mean ports? — HMR
– HMR, Commented Nov 1, 2018 at 15:17
@HMR children is constructed with the spread syntax so it's just the other key: values of the destructured object — Axnyff
– Axnyff, Commented Nov 1, 2018 at 15:19

omri_saadon · Accepted Answer · 2018-11-01 15:32:46Z

1

const ports = [ {
                    "name": "GigabitEthernet 0/2", "id": "5bd350c7-d15b-4f8b-be70-18eda2bfe41a"
                }
                ,
                {
                    "name": "FastEthernet 0/19", "id": "5bd350c7-762d-4462-984b-e6f0a9edb6c7"
                }
                ,
                {
                    "name": "FastEthernet 0/21", "id": "5bd350c7-2927-43db-ae43-119b12636de6"
                }
 ]

 const update_ports = (ports) => ports.map(({ id, name }) => {
   return { label: name, value: id }
 })
console.log(update_ports(ports)) // The new ports with the new keys and values.

You can use the map function and return new array of objects with new keys and values in each item in the array.

axios.get('StepThreeFinalData.json').then(response => {
           const nodess = response.data.outputs.graph.nodes.map(({id, name, 
...children}) => ({value: id, label: name, children: update_ports(children.ports)}));

Notice i've called to update_ports in your axios success.

edited Nov 1, 2018 at 15:32

answered Nov 1, 2018 at 15:22

omri_saadon

10.7k8 gold badges36 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

omri_saadon Over a year ago

@CHays412, You are welcome. Kindly ask to accept the answer whether it solved your issue (Clicking the Accept answer button) Good luck !

Goku · Accepted Answer · 2018-11-01 15:25:30Z

const test = {
  "outputs": {
    "graph": {
      "nodes": [{
        "name":"nlabme3400",
        "ports": [
          {
            "name": "GigabitEthernet 0/2", "id": "5bd350c7-d15b-4f8b-be70-18eda2bfe41a"
          },
          {
            "name": "FastEthernet 0/19", "id": "5bd350c7-762d-4462-984b-e6f0a9edb6c7"
          },
          {
            "name": "FastEthernet 0/21", "id": "5bd350c7-2927-43db-ae43-119b12636de6"
          }
        ],
        "id":"5bd350bf-8515-4dc2-9b12-16b221505593"
      }]
    }
  }
};

const test2 = test.outputs.graph.nodes.map(({name, ports, id}) => ({
  name,
  id,
  ports: ports.map(({name, id}) => ({
    label: name,
    value: id
  }))
}));

console.log(test2);

Read more about map, filter, reduce, that will save your life

CHays412 · Accepted Answer · 2018-11-02 15:11:10Z

0

axios.get('StepThreeFinalData.json').then(response => { const nodess = response.data.outputs.graph.nodes.map(({id, name, ...children}) => ({value: id, label: name, children: update_ports(children.ports)}));

answered Nov 2, 2018 at 15:11

CHays412

1453 silver badges15 bronze badges

Collectives™ on Stack Overflow

React changing array label names on map output

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related