从对象数组中获取匹配的属性并将它们放入新数组中

Question

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 , ie, 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?

Answer 1

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"]

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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>