Jump to content
JEllington

RESOLVED: nested forEach within .map and .filter

Recommended Posts

Hello, I am having problems wrapping my head around nesting a forEach method within a .map .filter method.
I have two arrays..
buttons: that contains key value pairs of button display statuses.
eleColor: contains values that will be filtered through "buttons.disp" key values.
I am using .map.filter methods to create a new array. When I assign the "disp" value statically all works  and the new array is created.
But when I try to iterate through eleColor for the parameter the code fails.
Any recommendations on correct syntax or a better method to filter values from a different array is greatly appreciated.
To make my objective clearer, I have included my code with explanation comments below.

Thank you in advance for any and all comments/sugesstions on completing my objective.
Jim

//button objects array
var buttons = [
   { eleId: "btnStop1", disp: "red", stat: "on" },
   { eleId: "btnStop0", disp: "red", stat: "off" },
   { eleId: "btnGo1", disp: "green", stat: "on" },
   { eleId: "btnGo0", disp: "green", stat: "off" }
];
//display color array
var eleColor = ["red", "green"];
//create eleBtn array using the value of "red" filtered through "buttons"
// this works filterring all disp: keys with the value of red..
eleBtn = buttons.map(e => e).filter(e => e.disp === "red");
console.log("eleBtn array ", eleBtn);
// returns eleBtn array (2) [{…}, {…}]
// 0:{eleId: "btnUnassigned1", disp: "red", stat: "on"}
// 1:{eleId: "btnUnassigned0", disp: "red", stat: "off"}
// length:2
 
//create eleButton array from "eleColor" filtered through "buttons"
// but incorrect when eleColor array is iterated through forEach
eleButton = buttons.map(e => e).filter(e => e.disp === (eleColor.forEach(ele => {ele})));
console.log("eleButton", eleButton);
// how do I correctly iterate through each item in "eleColor",
// so all red and green "disp" values are assigned to the "eleButton" array?

Share this post


Link to post
Share on other sites

Resolved: the key to the issue  is in the topic title. 
I had to reverse my logic and wrap the .map.filter within the forEach. This worked, but as .map.filter creates an array with the same name, each previous iteration was overwritten by the current iteration.
The final solution wast to use another nested forEach instead of the .map.filter, then push the result to the eleBtn array.
 

//button objects array
var buttons = [
  { eleId: "btnStop1", disp: "red", stat: "on" },
  { eleId: "btnStop0", disp: "red", stat: "off" },
  { eleId: "btnGo1", disp: "green", stat: "on" },
  { eleId: "btnGo0", disp: "green", stat: "off" }
];
//display color array
var eleColor = ["red", "green"];
//using the values of "eleColor" filtered through "buttons"
//then store results in "eleBtn"
var eleBtn = [];
eleColor.forEach(ele => buttons.forEach(e => {
if (e.disp === ele) {eleBtn.push(e)}
}));
console.log("eleBtn results", eleBtn);
//eleBtn results (4) [{…}, {…}, {…}, {…}]
// 0:{eleId: "btnUnassigned1", disp: "red", stat: "on"}
// 1:{eleId: "btnUnassigned0", disp: "red", stat: "off"}
// 2:{eleId: "btnOnsite1", disp: "green", stat: "on"}
// 3:{eleId: "btnOnsite0", disp: "green", stat: "off"}
// length:4

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×