CODEWITHSUNDEEP
javascriptarraysreactjs
CHays412
CHays412

Reputation: 145

React changing array label names on map output

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!

Upvotes: 1

Views: 1762

Answers (3)

CHays412
CHays412

Reputation: 145

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

Upvotes: 0

omri_saadon
omri_saadon

Reputation: 10631

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.

Upvotes: 1

Goku
Goku

Reputation: 241

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

Upvotes: 0

Related Questions