Get matching properties out of array of objects and put them in a new array

user_6927748 0
Viewed 44

I have an array of objects with the following structure:

let arr = [
  {name: "abc", show: true , display:"ABC"},
  {name: "xyz", show: false , display:"XYZ"},
  {name: "pqr", show: true , display:"PQR"},
  {name: "lmn", show: false , display:"LMN"}
]

I want the output to be two arrays, one for show:true and the other for show:false, i.e., based on the value of show property. Ideally, a single function that gives me both the arrays would be great. I'm expecting next output:

arr1 = ["abc", "pqr"]
arr2 = ["xyz", "lmn"]

My current approach is:

// Approach I have tried so far:

var results = arr.filter(function(entry) { 
    return entry.show === false;
});

But this gives me an array of objects, and instead I want an array with names. Can someone help me with this?

ecmascript-6 arrays javascript
5 Answers

You could use .reduce to buld a multi-dimensional array, and then push the name into index 0 if show is false and push into index 1 if show is true like so:

let arr = [ 
  {name: "abc", show: true , display:"ABC"},
  {name: "xyz", show: false , display:"XYZ"},
  {name: "pqr", show: true , display:"PQR"},
  {name: "lmn", show: false , display:"LMN"}
];
          
let [arr2, arr1] = arr.reduce(
        (acc, {name, show}) => (acc[+show].push(name), acc), 
    [[], []]);

console.log(arr1); // ["abc", "pqr"]
console.log(arr2); // ["xyz", "lmn"]

user_56489540

One possible solution to approach this is to use Array.reduce() to generate an object with the desired arrays, then you can access those arrays later.

let arr = [
  {name: "abc", show: true , display:"ABC"},
  {name: "xyz", show: false , display:"XYZ"},
  {name: "pqr", show: true , display:"PQR"},
  {name: "lmn", show: false , display:"LMN"}
];
          
var res = arr.reduce((acc, {show, name}) =>
{
    if (show)
        acc.show.push(name);
    else
        acc.noShow.push(name);

    return acc;

}, {show:[], noShow:[]});

console.log("show => true", res.show);
console.log("show => false", res.noShow);
.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}

user_103664950

Try this:

let arr = [ {name: "abc", show: true , display:"ABC"},
            {name: "xyz", show: false , display:"XYZ"},
            {name: "pqr", show: true , display:"PQR"},
            {name: "lmn", show: false , display:"LMN"}
          ]
          
const match = (bool) => arr.filter(res => res.show === bool).map(ele => ele.name);

console.log(match(true));
console.log(match(false));

user_112708400

ForEach every object, then check the show property. If show == true then push the contents to an array, else to another array

let arr = [{name: "abc",show: true,display: "ABC"},{name: "xyz",show: false,display: "XYZ"},{name: "pqr",show: true,display: "PQR"},{name: "lmn",show: false,display: "LMN"}]
let arr1 = [], arr2 = [];
arr.forEach((val, intt) => {
  if (val.show) {
    arr1.push(val.name)
  } else {
    arr2.push(val.name)
  }
})
console.log(arr1);
console.log(arr2);

Using .map you can do this by returning an array from it like

let arr = [{name: "abc",show: true,display: "ABC"},{name: "xyz",show: false,display: "XYZ"},{name: "pqr",show: true,display: "PQR"},{name: "lmn",show: false,display: "LMN"}]
let arr1 = arr.map((val,intt) => { if (val.show) return val.name }).filter(n => n)
let arr2 = arr.map((val,intt) => { if (!val.show) return val.name }).filter(n => n)
console.log(arr1);
console.log(arr2)

This is the same. In the first function, we return only the values that have show == true and the second closure returns the opposite. We use array.filter(n => n) to filter out empty values

user_109678890

Using a library like Ramda.js makes solutions nice and short

const arr = [
  {name: "abc", show: true , display:"ABC"},
  {name: "xyz", show: false , display:"XYZ"},
  {name: "pqr", show: true , display:"PQR"},
  {name: "lmn", show: false , display:"LMN"}
]


const f = R.pipe(
  R.partition(R.prop("show")), 
  R.map(R.pluck("name"))
)

console.log(f(arr))
<script src="//cdn.jsdelivr.net/npm/ramda@latest/dist/ramda.min.js"></script>

user_77678300
Related