如何在React/JavaScript中按对象的首字母筛选数组

Question

我对React和Javascript环境还比较陌生，一些语法和错误对我来说不太清晰。我尝试使用filter函数，类似于这样的方式，但是会出现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}]

- Shalin Patel

---

嗨，请稍微整理一下你的代码。 :) - Danyal

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

- StepUp

---

在这种情况下，type[0] 不是更简单吗？嗯，虽然你的代码看起来更易读。 - Lain

即使我这样做，仍然会出现错误：“TypeError: undefined is not an object (evaluating 'f.CRS_SUBJ_CD.toLowerCase')”。不理解这是什么意思。 - Shalin Patel

你能展示一下 f 和 CRS_SUBJ_CD 变量是什么吗？ - Danyal

在我看来，当使用 startsWith 时，设置搜索字符串更加灵活。例如，.startsWith('Pi') 或任何其他字符串。 - StepUp

@ShalinPatel 尝试使用括号编写 f.CRS_SUBJ_CD.toLowerCase()。 - StepUp

Answer 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"}] ```

- Danyal

---

contains()不像 OP 所要求的那样单独隔离第一个字符。 - charlietfl

这个解决方案可以处理你提供的示例数组，但出现了错误（未定义的对象（评估“x.CRS_SUBJ_CD.toLowerCase”））。其中CRS_SUBJ_CD是示例代码中的类型。 - Shalin Patel

你是否在调用 toLowerCase() 时加了括号？ - Danyal

让我们在聊天中继续这个讨论。 - Danyal

顺便说一下，我找出了导致这种错误的原因。基本上，我正在导入csv文件并将csv文件中的所有数据设置为我声明的状态。但是，在构造函数中声明该状态时，我在该数组中制作了额外的对象，这使得数据变得混乱并且崩溃了。 - Shalin Patel