Jump to content

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?
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
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...