How to remove specific nested object from array of arrays

How to remove an item from an array of objects:

[
  {
    "category": "CC",
    "paymentOptions": [
      {
        "payCode": "v",
        "description": "Visa"
      },
      {
        "payCode": "m",
        "description": "Master"
      }
    ]
  },
  {
    "category": "PayPal",
    "paymentOptions": [
      {
        "payCode": "PY",
        "description": "Paypal"
      }
    ]
  }
]

I want to remove this section from the above array of objects:

{
  "payCode": "m",
  "description": "Master"
}

After removing the above section my array should be like:

[
  {
    "category": "CC",
    "paymentOptions": [
      {
        "payCode": "v",
        "description": "Visa"
      }
    ]
  },
  {
    "category": "PayPal",
    "paymentOptions": [
      {
        "payCode": "PY",
        "description": "Paypal"
      }
    ]
  }
]

I have tried the below code but does not return the desired result:

this.payments.filter(x => x.paymentOptions.filter(x => x.description.toLowerCase() !="Master"))

How to do that? I need the output as above after removing the specific object.

You are trying to remove the item with description: "master" in paymentOptions array for each element in the payments array.

1. With x.description.toLowerCase() !="Master", this will be never be true.

2. Use the Array.map() to iterate and update the paymentOptions array for each element.

let result = this.payments.map(x => ({
  ...x,
  paymentOptions: x.paymentOptions.filter(y => y.description.toLowerCase() != "master")
}));

Demo @ TypeScript Playground

There are multiple mistakes in your code:

• Your first call to filter's result is not retreived: filter returns an array and doesn't modify the original array. You must get the result, for example this.payments = this.payments.filter(...);
• using a filter call as test for another filter call will probably not work, a condition is expected here, and filter returns an array which is always truthy. The result of the inner filter call will also not be stored
• you use toLowerCase and compare to "Master" which is capitalized, so every element will pass this test

You can try a combination of map and filter like this

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

this.payments = [
  {
    "category": "CC",
    "paymentOptions": [
        {
            "payCode": "v",
            "description": "Visa"
        },
        {
            "payCode": "m",
            "description": "Master"
        }
    ]
  },
  {
    "category": "PayPal",
    "paymentOptions": [
        {
            "payCode": "PY",
            "description": "Paypal"
        }
    ]
  }
];

var result = this.payments.map(a => {
  a.paymentOptions = a.paymentOptions.filter( x => x.description.toLowerCase() != 'master' );
  return a;
});

console.log(result);

<!-- end snippet -->

If you don't want any more the "original" array, you can simple use forEach

this.payments.forEach(x => {
  paymentOptions: x.paymentOptions
           .filter(y => y.description.toLowerCase() != "master")
});

For some reason, all other answers suggest array = array.filter(…) approach.

There are many other approaches though, and one of them would be to actually find and actually remove the undesired items (rather than substitute the original array with a new one that doesn't have the undesired items). So, importantly, this approach changes the original value.

interface Item {
  category: string
  paymentOptions: Array<{
    payCode: string
    description: string
  }>
}

function removePaymentOptions(category: string, payCode: string, items: Item[]): void {
  // find the to-be-updated items
  const itemsToUpdate = items.filter((item) => item.category === category)

  // find the undesired payment options in each of the item
  for (const item of itemsToUpdate) {
    const optionIndex = item.paymentOptions.findIndex((option) => option.payCode === payCode)

    // if the payment option exists, remove it from the item
    if (optionIndex !== -1) {
      item.paymentOptions.splice(optionIndex, 1)
    }
  }
}

const items = /* your array */

removePaymentOptions('CC', 'm', items)

// `items` is now updated to _not_ have the undesired payment options