Fetch properties from array of objects

user_6927748 0
Viewed 161

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
ecmascript-6 arrays javascript
5 Answers

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

user_12340870

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 accumulator if is doesn't.

user_104456970

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)

user_14632070 
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})
    }
})
user_101811240

You should return object inside the map function

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