Get objects in array on property and with specific value of key

Question

I need to find all objects of array, which contain color "green" in "mode" property.

let arr = [
  {
    "type": "One",
    "mode": [{ 
        "color": "blue", 
        "size": "L"
      }
    ]
  }, {
    "type": "Two",
    "mode": [{ 
        "color": "green", 
        "size": "M"
      }
    ]
  },{
    "type": "Three",
    "mode": [{ 
        "color": "green", 
        "size": "L"
      }
    ]
  },{
    "type": "Four",
    "mode": [{ 
        "color": "red", 
        "size": "XS" 
      }
    ]
  }
];
    
    
let result = arr.indexOf(arr.find(function(el,index){
  return el['mode'][0].color === 'green';
}))

console.log(result);

Currently I can only get the index.

I would like to get something like this in the output:

     [
       {
        "type": "Two",
        "mode": [{ 
            "color": "green", 
            "size": "M"
          }
        ]
      },{
        "type": "Three",
        "mode": [{ 
            "color": "green", 
            "size": "L"
          }
        ]
      }
    ]

Roko C. Buljan · Accepted Answer · 2022-12-16 13:09:58Z

Use Array.prototype.filter and Array.prototype.some to search the inner array

const filterByModeColor = (arr, color) =>
  arr.filter(ob => ob.mode?.some(o => o.color == color));

const myArr = [
  {"type": "One", "mode": [{"color": "blue", "size": "L"}]},
  {"type": "Two", "mode": [{"color": "green", "size": "M"}]},
  {"type": "Three", "mode": [{"color": "green", "size": "L"}]},
  {"type": "Four", "mode": [{"color": "red", "size": "XS"}]}
];

const filtered = filterByModeColor(myArr, "green");
console.log(filtered);

To additionally filter the inner "mode": arrays use Array.prototype.reduce instead.

const filterByModeColor = (arr, color) => arr.reduce((acc, obj) => {
  const mode = obj.mode.filter(o => o.color === color);
  mode.length && acc.push({...obj, mode});
  return acc;
}, []);

const myArr = [
  {"type": "One", "mode": [{"color": "blue", "size": "L"}, {"color": "green", "size": "L"}]},
  {"type": "Two", "mode": [{"color": "green", "size": "S"}, {"color": "green", "size": "M"}, {"color": "red", "size": "Xl"}]},
  {"type": "Three", "mode": [{"color": "yellow", "size": "L"}, {"color": "blue", "size": "XL"}]},
  {"type": "Four", "mode": [{"color": "red", "size": "XS"}]}
];

const filtered = filterByModeColor(myArr, "green");
console.log(filtered);

Andy · Accepted Answer · 2022-12-16 12:41:51Z

The best approach is to use two array methods: filter and some.

filter allows you to iterate over the data array and return only those objects that match a certain condition. In this case it's whether any of the objects in the mode array has the color "green".

let arr=[{type:"One",mode:[{color:"blue",size:"L"}]},{type:"Two",mode:[{color:"green",size:"M"}]},{type:"Three",mode:[{color:"green",size:"L"}]},{type:"Four",mode:[{color:"red",size:"XS"}]}];

// Iterate over the array of objects
const result = arr.filter(obj => {

  // If some of the objects in the `mode` array
  // have a color property with the value green
  // return `true` - and that object will be returned
  // by `filter`
  return obj.mode.some(m => m.color === 'green');
});

console.log(result);

Collectives™ on Stack Overflow

Get objects in array on property and with specific value of key

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related