Fetch properties from array of objects

Question

I am trying to fetch two properties out of each array and then form a array out of this. I have also shown the expected output.

columns = [
           {Header: ƒ, Cell: ƒ, sortable: false, show: true},
           {Header: ƒ, accessor: "firstName", sortable: false, show: true},
           {Header: ƒ, accessor: "status", sortable: false, show: true},
           {Header: ƒ, accessor: "visits", sortable: false, show: true}
          ]

I want the output to be

[{name: "firstName",show: true},{name: "status",show: true},{name:"visits", show: true}]

I have tried this approach of getting one field, How do I get two values and then form a new array of objects itslef.

 let keys = [...new Set(arr.map(arr => arr.accessor))]; // able to get one property, but need two in form of object

Answer 1

Use a simple Map() :

columns.filter(
  col => !!col.accessor).map(
   column => ({ name: column.accessor, show: column.show })
 )

The filter remove columns without accessor property.

Map() returns formatted array.

 const columns = [ {Header:"ƒ", Cell: "ƒ", sortable: false, show: true}, {Header: "ƒ", accessor: "firstName", sortable: false, show: true}, {Header: "ƒ", accessor: "status", sortable: false, show: true}, {Header: "ƒ", accessor: "visits", sortable: false, show: true} ] const newColumns = columns.filter( col => !!col.accessor).map( column => ({ name: column.accessor, show: column.show }) ); console.log(newColumns); 

Answer 2

You can use reduce to create a one-liner:

 const columns = [{Header:"ƒ", Cell: "ƒ", sortable: false, show: true},{Header: "ƒ", accessor: "firstName", sortable: false, show: true},{Header: "ƒ", accessor: "status", sortable: false, show: true},{Header: "ƒ", accessor: "visits", sortable: false, show: true}] var filtered = columns.reduce((acc, {accessor:a, show}) => a ? [...acc, {name: a, show}] : acc , []) console.log(filtered) 

a ? will make a check to see if accessor exists, and will push the new object if it does, or return the acc umulator if is doesn't.

Answer 3

simple filter() for filtering the proper column which has accessor and show values, and map() to customize the values.

 var ƒ = "dummy" columns = [ {Header: ƒ, Cell: ƒ, sortable: false, show: true}, {Header: ƒ, accessor: "firstName", sortable: false, show: true}, {Header: ƒ, accessor: "status", sortable: false, show: true}, {Header: ƒ, accessor: "visits", sortable: false, show: true} ] var finalResult = columns.filter(column => column.accessor && column.show).map(item => { return {name: item.accessor,show: item.show} }) console.log(finalResult) 

Answer 4

col.map(element => {
    return {accessor: element.accessor, show: element.show}
})

edit: Instead of looping it twice like other solutions, I prefer to loop through it and add only the needed element.

let res = [];
columns.forEach(element => {
    if(!!element.accessor) {
        res.push({accessor: element.accessor, show: element.show})
    }
})

Answer 5

You should return object inside the map function

columns.map(item => {
   return {name: item.accessor, show: item.show}
});