【问题标题】:How to filter an array of objects by their first letter in react/javascript如何在 react/javascript 中通过对象的首字母过滤对象数组
【发布时间】:2020-09-25 23:19:19
【问题描述】:

我对 React 和 javascript 环境还很陌生,所以一些语法和错误对我来说没有意义。我曾尝试使用类似这样的过滤器功能,但给我一个错误 undefined is not an object.

const temp = example.filter(x => x.includes('A'))

示例:

data = [{id: 1, type: Pizza}, {id: 2, type: Taco}, {id: 3, type: Pasta}, {id: 4, type: Sandwich}, {id: 5, type: Pumpkin Pie}]

输出:

temp = [{id: 1, type: Pizza}, {id: 3, type: Pasta}, {id: 5, type: Pumpkin Pie}]

【问题讨论】:

  • 您好,请将您的代码格式设置好一点。 :)

标签: javascript arrays reactjs


【解决方案1】:

尝试使用startWith:

let data = [{id: 1, type: 'Pizza'}, {id: 2, type: 'Taco'}, {id: 3, type: 'Pasta'}, {id: 4, type: 'Sandwich'}, {id: 5, type: 'Pumpkin Pie'}]

// Output:

let result = data.filter(f => f.type.toLowerCase().startsWith('p'))
console.log(result)

【讨论】:

  • type[0] 在这种情况下不会更简单吗?嗯,虽然你的似乎更具可读性。
  • 即使我这样做,我也会收到这样的错误“TypeError: undefined is not an object (evalating 'f.CRS_SUBJ_CD.toLowerCase')”。不明白这是什么意思。
  • 您能说明一下fCRS_SUBJ_CD 变量是什么吗?
  • @La 在我看来,当使用startsWith 时,设置搜索字符串更加灵活。例如,.startsWith('Pi') 或任何其他字符串
  • @ShalinPatel 尝试用括号写 f.CRS_SUBJ_CD.toLowerCase()
【解决方案2】:

您的代码不起作用的原因是您没有正确访问属性并尝试匹配整个对象。 x.includes('A') 正在与 x 的整个对象进行比较。

如果您只想根据数组中的某些特定属性过滤数组中的对象,请按照以下方法进行。

示例:

let data = [{id: 1, type: "Pizza"}, {id: 1, type: "Taco"}, {id: 1, type: "Pasta"}, {id: 1, type: "Sandwich"}, {id: 1, type: "Pumpkin Pie"}]

流程:

data.filter(x => x.type.toLowerCase().includes('pizza'))

输出:

[{id: 1, type: Pizza}]

或者在你的情况下,如果你只想按第一个字母排序,你可以这样做:

data.filter(x => x.type.toLowerCase().startsWith('p'))

返回: [ {id: 1, type: "Pizza"},{id: 1, type: "Pasta"}, {id: 1, type: "Pumpkin Pie"} ]`

【讨论】:

  • contains() 不会像 OP 要求的那样隔离第一个字符
  • 哦,抱歉,我想使用includes()。 :)
  • 此解决方案适用于您给出的示例数组,但由于某种原因它给了我错误(未定义不是对象(评估'x.CRS_SUBJ_CD.toLowerCase'))。其中 CRS_SUBJ_CD 是示例代码中的类型。
  • 嘿顺便说一句,我知道是什么导致了这种错误。所以基本上我正在导入 csv 文件并将 csv 文件中的所有数据设置为我声明的状态。但是当在构造函数中声明该状态时,我在该数组中创建了额外的对象,这使得数据变得混乱和中断。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2019-05-29
  • 2021-04-23
  • 2022-12-12
  • 2020-08-09
  • 2015-03-24
  • 2020-01-17
  • 1970-01-01
相关资源
最近更新 更多