Tengo una matriz de objetos javascript simple.
const obj = [ { id:1, color:'red' }, { id:2, color:'black' }, { id:3, color:'purple' }, { id:4, color:'grey' }, { id:5, color:'white' } ]
Digamos que tengo una matriz: colores = ['rojo', 'negro'].
Quiero filtrar obj pero no así => obj.filter(o=>o.color==='black' || o.color==='red').
Depende de la cantidad de color en la matriz de colores...
Utilice Array.includes junto con Array.filter
const obj = [ { id:1, color:'red' }, { id:2, color:'black' }, { id:3, color:'purple' }, { id:4, color:'grey' }, { id:5, color:'white' } ]; const colors = ['red','black']; const output = obj.filter(node => colors.includes(node.color)); console.log(output);Puede usar una combinación de filter() con findIndex() :
const obj = [ { id:1, color:'red' }, { id:2, color:'black' }, { id:3, color:'purple' }, { id:4, color:'grey' }, { id:5, color:'white' } ]; const colors = ['red','black']; let ans = obj.filter(x => colors.indexOf(x.color) > -1); console.log(ans); let ans2 = obj.filter(x => colors.includes(x.color)); console.log(ans2);Este puede manejar múltiples criterios.
const obj = [ { id:1, color:'red' }, { id:2, color:'black' }, { id:3, color:'purple' }, { id:4, color:'grey' }, { id:5, color:'white' } ] document.getElementById("filter").addEventListener("click",function(){ var terms=document.getElementById("term").value.split(' '); var filtered =[]; obj.forEach(function(v){ terms.forEach(function(t){ if(v.color.includes(t)){ filtered.push(v); return false; }; }); }); console.log(filtered); }); <input type='text' id='term'><button id='filter'>Filter</button>