React accessing to array's values using dynamic naming for the variables

Question

Here is a simple printing out of the values of an array:

export default function App() {
  var data = [{name:'Jhon', age:28, city:'HO'},
            {name:'Onhj', age:82, city:'HN'},
            {name:'Nohj', age:41, city:'IT'}
           ];

    data.map(({name, age}, i) => {
       console.log(name + ' ' + age);
    })
 }

Now, I receive the names of the values in another array, how can I print out the values of the array using a variable:

    export default function App() {
      var data = [{name:'Jhon', age:28, city:'HO'},
                {name:'Onhj', age:82, city:'HN'},
                {name:'Nohj', age:41, city:'IT'}
               ];
     //Here are the keys of the array
     var colNames =  ['name','age'];
    
        data.map(({colNames}, i) => {
        //So I can do something like
           console.log(colNames[0] + ' ' + colNames[1]);
        })
}

Thanks!

David Buck · Accepted Answer · 2020-08-02 21:23:32Z

1

As per your code, you are trying to destructure colNames property from the data object which is not present on the data object.

You can use below snippets to print the values from the data object.

export default function App() {
    var data = [{name:'Jhon', age:28, city:'HO'},
           {name:'Onhj', age:82, city:'HN'},
           {name:'Nohj', age:41, city:'IT'}
           ];
    //Here are the keys of the array
    var colNames =  ['name','age'];

    data.map((item, i) => {
        //So I can do something like
        console.log(item[colNames[0]] + ' ' + item[colNames[1]]);
    })
}

edited Aug 2, 2020 at 21:23

David Buck

3,87740 gold badges54 silver badges73 bronze badges

answered Aug 2, 2020 at 21:17

Vishwas Meshram

414 bronze badges

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

Comments

Christian Fritz · Accepted Answer · 2020-08-02 21:19:53Z

0

I get the sense that you want:

export default function App() {
  var data = [{name:'Jhon', age:28, city:'HO'},
            {name:'Onhj', age:82, city:'HN'},
            {name:'Nohj', age:41, city:'IT'}
           ];
  
    // assuming you got the colNames from somewhere..
    data.map(item => {
       const text = colNames.map(c => item[c]).join(' ');
       console.log(text);
    });
}

answered Aug 2, 2020 at 21:19

Christian Fritz

21.5k3 gold badges48 silver badges82 bronze badges

Collectives™ on Stack Overflow

React accessing to array's values using dynamic naming for the variables

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related