打字稿数组对象过滤器答案

【问题标题】：Typescript array object filter打字稿数组对象过滤器
【发布时间】：2018-08-22 14:23:38
【问题描述】：

我正在尝试过滤 angular 5 中的数组对象，这是我的对象

{
    "id_record": 2,
    "groupName": "PD",
    "count": 15,
    "userList": [{
            "name": "jeffhua",
            "nEmail": "jeffhua@abc.com"
        },
        {
            "name": "joey",
            "nEmail": "joey@abc.com"
        },
        {
            "name": "angelagosto",
            "nEmail": "angelagosto@abc.com"
        }
    ]
}

这是我的过滤器代码

return items.filter(it => {
  return it.userList.filter(dit => {
    return dit.name.toLowerCase().includes(filterText)
  });
});

可能出了什么问题？

【问题讨论】：

items 是什么？一个对象还是一个数组？你的代码和结构不匹配。
如果内部过滤器的条件总是返回假，那么它仍然会返回一个空数组，它不是假的 array.length 的 0 或 !!0 是假的
它是一个自定义数组对象，是的，内部过滤器总是返回true，过滤时现有数组没有变化。

标签： javascript arrays multidimensional-array filter

【解决方案1】：

使用some 而不是内部filter

  return items.filter(it => {
      return it.userList.some(dit => {
        return dit.name.toLowerCase().includes(filterText)
      });
    });

【讨论】：

【解决方案2】：

在您的过滤器代码中，第二个过滤器返回一个数组：

return it.userList.filter(dit => {
    return dit.name.toLowerCase().includes(filterText)
  });
// returns array

过滤器方法等待返回一个布尔值。请尝试以下操作：

return items.filter(it => {
  return it.userList.filter(dit => {
    return dit.name.toLowerCase().includes(filterText);
  }).length !== 0;
});

在我的代码 sn-p 中，我检查内部过滤器结果（数组）是否为空。如果不是，则向父过滤器返回 true，这会将当前对象保留在结果数组中。

细分（编辑）

以下返回一个布尔值，检查您的一个用户的小写名称是否包含 filterText。

return dit.name.toLowerCase().includes(filterText);

然后，此块返回一个数组，其中包含在前面解释的条件下返回 true 的所有值：

return it.userList.filter(dit => {
    return dit.name.toLowerCase().includes(filterText);
})

但是，sn-p 代码的父部分过滤数组，它需要一个布尔值作为返回值：

return items.filter(it => {
  return // expect boolean
});

然后，.length !== 0 在末尾：

it.userList.filter(dit => {
    return dit.name.toLowerCase().includes(filterText);
})

使它成为一个布尔值，它应该反映你想要的条件。

完整（和评论）：

// filter returns an array filtered by the method
return items.filter(it => {
  // awaits a boolean return value, with filter returning an array.
  return it.userList.filter(dit => {
    // filter awaits a boolean as return value AND returns a boolean --> ok for filter
    return dit.name.toLowerCase().includes(filterText);
  }).length !== 0; // filter has returned an array, we cast it to boolean while checking if its length is greater than 0.
});

【讨论】：

如果我添加“.length !== 0”，它会抛出错误说“.length 不能应用于布尔对象”，因此它证明它正在返回布尔值，但是我可以获得的方法是什么过滤下一级。
根据 MDN 网络文档：filter() 方法创建一个新数组：link。您是否在正确的位置包含了 .length !== 0 ？在我的示例中，它是倒数第二个结尾 })（return it.userList.filter(dit => {...}) 的结束
感谢您的帮助，但没有奏效。相反，我在对象中添加了一个标志并设置它，以便 html 将根据标志值显示。