搜索 objects.shortName 数组以及嵌套的对象数组答案

【问题标题】：search array of objects.shortName and also nested array of objects搜索 objects.shortName 数组以及嵌套的对象数组
【发布时间】：2021-03-29 16:22:24
【问题描述】：

我正在尝试过滤大量具有嵌套值的对象。

我需要匹配 shortName OR description OR isoCode。有些项目可能有 20 多个国家/地区，但大多数有 1 到 5 个。

{
 countries: Array(1)
  0:
    description: "United Kingdom"
    isoCode: "GB"
  1:
    description: "Italy"
    isoCode: "IT"
 shortName: "AIB (NI)"
},
// * 2000

我尝试在此基础上进行构建，但效果有限。

  methods: {
    filterInstitutions: function (items: any, event: any): void {
      console.log(items, event.target.value);
      if (event === '') {
        newFunction(items);
      } else {
        this.listedInstitutions = items.filter((item: any) => {
          return item.shortName.toLowerCase().includes(event.target.value.toLowerCase());
        })
      }
    },
  },

我在 Vue（打字稿）中构建它，但理解它是一个 JS 问题而不是 Vue 问题。

欢迎提出任何建议。

【问题讨论】：

标签： javascript vue.js object filter nested

【解决方案1】：

您需要将countries 属性的description 和isoCode 的测试添加到您的过滤器函数中。

一种方法是使用数组的some() 方法，该方法将测试任何数组元素是否与您在回调中设置的任何测试相匹配。然后它将返回true（如果匹配）和false（如果不匹配）。

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;
})

例子

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)"
}]

&lt;input type="text" oninput="doFilter(event,someItems)"&gt;

【讨论】：

some() - 我明白了。谢谢，稍后再试。

【解决方案2】：

您可以创建一个属性数组以在您的对象中搜索并确定是否存在任何匹配项。

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
})

【讨论】：

isoCode 和 shortName 不是 item 本身的属性，而是每个 item 拥有的国家/地区列表中的对象的属性。
@trixn 如果您想要的只是真/假比较，您可以将其嵌套在另一个比较长度的过滤器中。更新了答案。
实际上，这也不起作用，因为您仍然只检查item.prop，这本身就已经错了。它必须是item[prop]，然后它仍然无法工作，因为不比较来自国家的道具，而是来自没有description 或isoCode 的项目。

【解决方案3】：

使用filter() 和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)
    ))
  ));
};

【讨论】：