How to filter inside a filter in nested arrays in Javascript

Question

I am trying to fetch all the costBreakdowns where the canceled status is false. So I am trying to filter() inside a filter() to fetch the complete array except the ones where the costBreakdowns have canceled is true:

const a = {
  "activeBookingsCostBreakdownGroups": [{
    "bookType": "RAIL",
    "costBreakdowns": [{
      "canceled": false,
      "totalInTripCurrency": {
        "amount": 43.39
      }
    }, ]
  }, {
    "bookType": "CAR",
    "costBreakdowns": [{
        "canceled": true,
        "totalInTripCurrency": {
          "amount": 86.78
        }
      },
      {
        "canceled": false,
        "totalInTripCurrency": {
          "amount": 87.79
        }
      },
    ]
  }]
}

console.log(
  a.activeBookingsCostBreakdownGroups.filter((elem) => (
    elem.costBreakdowns.filter(el => el.canceled === false)
  ))
)

But it somehow returns all the elements as though the filter() doesn't work.

So you want to keep the arrays, but only show those object with `canceled ` `false`? — 0stone0, Mar 02 '23 at 15:42

score 1 · Answer 1 · answered Mar 02 '23 at 15:46

I'd use reduce() were you first use filter on costBreakdowns to get an array of those where canceled is false.

Then if we;ve found anything (if (withoutFalse.length)) overwrite costBreakdowns with the result of filter (c.costBreakdowns = withoutFalse;) and then append that to the result (return [ ...p, c ];)

Otherwise, just ignore this one, and continue with the rest (return p);

const all = {"activeBookingsCostBreakdownGroups": [{"bookType": "RAIL", "costBreakdowns": [{"canceled": false, "totalInTripCurrency": {"amount": 43.39 } } ] }, {"bookType": "CAR", "costBreakdowns": [{"canceled": true, "totalInTripCurrency": {"amount": 86.78 } }, {"canceled": false, "totalInTripCurrency": {"amount": 87.79 } } ] } ]}

const data = all.activeBookingsCostBreakdownGroups;

const filtered = data.reduce((p, c) => {
    let withoutFalse = c.costBreakdowns.filter(c => !c.canceled);
    if (withoutFalse.length) {
        c.costBreakdowns = withoutFalse;
        return [ ...p, c ];
    }
    return p;
}, []);
    
console.log(filtered);

[
  {
    "bookType": "RAIL",
    "costBreakdowns": [
      {
        "canceled": false,
        "totalInTripCurrency": {
          "amount": 43.39
        }
      }
    ]
  },
  {
    "bookType": "CAR",
    "costBreakdowns": [
      {
        "canceled": false,
        "totalInTripCurrency": {
          "amount": 87.79
        }
      }
    ]
  }
]

score 1 · Answer 2 · answered Mar 02 '23 at 15:48

You can use Array.map() along with Array.filter() to remove all cost breakdown elements with canceled = true.

const a = {"activeBookingsCostBreakdownGroups": [ { "bookType": "RAIL", "costBreakdowns": [ { "canceled": false, "totalInTripCurrency": { "amount": 43.39 } } ] }, { "bookType": "CAR", "costBreakdowns": [ { "canceled": true, "totalInTripCurrency": { "amount": 86.78 } }, { "canceled": false, "totalInTripCurrency": { "amount": 87.79 } } ] } ]}
          
const result = { 
    activeBookingsCostBreakdownGroups: a.activeBookingsCostBreakdownGroups.map(obj => { 
        return { ...obj, costBreakdowns: obj.costBreakdowns.filter(cb => !cb.canceled) }
    })
}
 
 console.log(result)

.as-console-wrapper { max-height: 100% !important; }

score 0 · Answer 3 · answered Mar 02 '23 at 16:45

this code can be use too, use with map and filter

const a = {
  activeBookingsCostBreakdownGroups: [
    {
      bookType: "RAIL",
      costBreakdowns: [
        { canceled: false, totalInTripCurrency: { amount: 43.39 } },
      ],
    },
    {
      bookType: "CAR",
      costBreakdowns: [
        { canceled: true, totalInTripCurrency: { amount: 86.78 } },
        { canceled: false, totalInTripCurrency: { amount: 87.79 } },
      ],
    },
  ],
};

const data = a.activeBookingsCostBreakdownGroups;
const filter = data.map(function (value) {
  const isNotCancel = value.costBreakdowns.filter((c) => !c?.canceled);
  return { ...value, costBreakdowns: isNotCancel };
});

console.log(filter);

score 0 · Answer 4 · answered Mar 02 '23 at 16:49

You can use .map method with destructuring syntax and spread operator ... to extract costBreakdowns value and the rest of your object. Inside the map funtion , a new object is created using the ...rest props and results of costBreakdowns after running filter method.

const a = {
  "activeBookingsCostBreakdownGroups": [{
"bookType": "RAIL",
"costBreakdowns": [{
  "canceled": false,
  "totalInTripCurrency": {
    "amount": 43.39
  }
}, ]
  }, {
"bookType": "CAR",
"costBreakdowns": [{
    "canceled": true,
    "totalInTripCurrency": {
      "amount": 86.78
    }
  },
  {
    "canceled": false,
    "totalInTripCurrency": {
      "amount": 87.79
    }
  },
]
  }]
};

const result = {
  activeBookingsCostBreakdownGroups: a.activeBookingsCostBreakdownGroups.map(({costBreakdowns, ...rest}) => ({
...rest,
costBreakdowns: costBreakdowns.filter(({canceled}) => !canceled),
  })),
};

console.log(result);

How to filter inside a filter in nested arrays in Javascript

4 Answers4