return the item in an array of objects within an array of objects

I’m trying to return the values in the main object based on the boolean values in the nested array object. If the values in the main array are true, then it should look for the slots in the child array and return only those which are true. I have been trying this for quite sometime and can’t seem to find a solution. It returns all the objects in the nested array be it true or false. Would appreciate the help.

  const DATA = [
  {
  day: 'Monday',
  label: 'Monday',
  checked: false,**strong text**
  slots: [
    {slot: '9-10', checked: false},
    {slot: '10-11', checked: false},
  ],
},
{
  day: 'Tuesday',
  label: 'Tuesday',
  checked: false,
  slots: [
    {slot: '9-10', checked: false},
    {slot: '10-11', checked: false},
  ],
},
{
  day: 'Wednesday',
  label: 'Wednesday',
  checked: false,
  slots: [
    {slot: '9-10', checked: false},
    {slot: '10-11', checked: false},
  ],
},
{
  day: 'Thursday',
  label: 'Thursday',
  checked: false,
  slots: [
    {slot: '9-10', checked: false},
    {slot: '10-11', checked: false},
  ],
},
{
  day: 'Friday',
  label: 'Friday',
  checked: false,
  slots: [
    {slot: '9-10', checked: false},
    {slot: '10-11', checked: false},
  ],
},
{
  day: 'Saturday',
  label: 'Saturday',
  checked: false,
  slots: [
    {slot: '9-10', checked: false},
    {slot: '10-11', checked: false},
  ],
},

];

  useEffect(() => {
  setDaysCollection(DATA);
  }, []);
  const selectedDays = daysCollection.filter(
  (item: any) =>
    item.checked == true &&
    item.slots.filter(r => r.checked == true),
  );
 setSelectedItem(selectedDays);

Answer

Array.prototype.filter() expects a boolean return, and while you can use it to mutate the original array it is cleaner to work with the returned array instead.

Here is an example using some() to assert checked slots, and a map() call to further filter the nested arrays.

//{ day: 'Tuesday', label: 'Tuesday', checked: true, slots: [{ slot: '9-10', checked: false }, { slot: '10-11', checked: true },], }
const DATA = [{ day: 'Monday', label: 'Monday', checked: false, slots: [{ slot: '9-10', checked: false }, { slot: '10-11', checked: false },], }, { day: 'Tuesday', label: 'Tuesday', checked: true, slots: [{ slot: '9-10', checked: false }, { slot: '10-11', checked: true },], }, { day: 'Wednesday', label: 'Wednesday', checked: false, slots: [{ slot: '9-10', checked: false }, { slot: '10-11', checked: false },], }, { day: 'Thursday', label: 'Thursday', checked: false, slots: [{ slot: '9-10', checked: false }, { slot: '10-11', checked: false },], }, { day: 'Friday', label: 'Friday', checked: false, slots: [{ slot: '9-10', checked: false }, { slot: '10-11', checked: false },], }, { day: 'Saturday', label: 'Saturday', checked: false, slots: [{ slot: '9-10', checked: false }, { slot: '10-11', checked: false },], },];

const result = DATA
  .filter(({ checked, slots }) =>
    checked && slots.some(({ checked }) => checked)
  )
  .map(o => ({ ...o, slots: o.slots.filter(({ checked }) => checked) }));

console.log(result);