RESOLVED: nested forEach within .map and .filter

[JEllington]

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?

[JEllington]

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