[Vuejs]-Search array of objects.shortName and also nested array of objects

You will need to add in tests for the description and isoCode of your countries property to your filter function.

One way would be to use the Array’s some() method which will test if any of the array element’s match any test you setup in the callback. It will then return true if any do match and false if not.

let testValue = event.target.value.toLowerCase();
this.listedInstitutions = items.filter((item: any) => {
   //test the shortName
   let matchesShortName = item.shortName.toLowerCase().includes(testValue);

   //loop through countries and see if any description or isoCode match
   let matchesDescIsoCode = item.countries.some((item:any) => {
     let desc = item.description.toLowerCase();
     let code = item.isoCode.toLowerCase();
     return desc.includes(testValue) || code.includes(testValue);
   });
   return matchesShortName || matchesDescIsoCode;
})

Example

function doFilter(event, items) {
  let testValue = event.target.value.toLowerCase();
  let listedInstitutions = items.filter((item) => {
    let matchesShortName = item.shortName.toLowerCase().includes(testValue);
    let matchesDescIsoCode = item.countries.some((item) => {
      let desc = item.description.toLowerCase();
      let code = item.isoCode.toLowerCase();
      return desc.includes(testValue) || code.includes(testValue);
    });
    return matchesShortName || matchesDescIsoCode;
  });
  console.clear();
  console.log("Filtered List");
  console.log(listedInstitutions);
}

let someItems = [{
  countries: [{
      description: "United Kingdom",
      isoCode: "GB"
    },
    {
      description: "Italy",
      isoCode: "IT"
    }
  ],
  shortName: "AIB (NI)"
}, {
  countries: [{
      description: "United States",
      isoCode: "US"
    },
    {
      description: "Italy",
      isoCode: "IT"
    }
  ],
  shortName: "ABC (DE)"
}]

<input type="text" oninput="doFilter(event,someItems)">

You could create an array of properties to search on within your object(s) and determine if any matches exist.

this.listedInstitutions = items.filter((item: any) => {
  return item.countries.filter(
    country => ['description', 'isoCode', 'shortName'].filter(prop => item.prop && item.prop.toLowerCase().includes(event.target.value.toLowerCase()).length > 0
  ).length > 0
})

Using filter() and some():

function filterInstitutions (items, {target: {value}}) {
  const isMatch = text => text.toLowerCase().includes(value.toLowerCase());

  return items.filter(({shortName, countries}) => (
    isMatch(shortName) || countries.some(({description, isoCode}) => (
      isMatch(description) || isMatch(isoCode)
    ))
  ));
};