How to filter an array of objects by their first letter in react/javascript

Question

I am fairly new to React and javascript environment so some of the syntax and errors don't make sense to me. I have tried using the filter function something like this but gives me an error of undefined is not an object.

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

Example:

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

Output:

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

Hi, please format your code a bit better. :)

Danyal
– Danyal

2020-06-06 20:36:09 +00:00
Commented Jun 6, 2020 at 20:36 — Danyal
– Danyal, Commented Jun 6, 2020 at 20:36

Majid Savalanpour · Accepted Answer · 2020-06-06 23:45:26Z

4

Try to use 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)

edited Jun 6, 2020 at 23:45

Majid Savalanpour

1,8442 gold badges17 silver badges29 bronze badges

answered Jun 6, 2020 at 20:26

StepUp

38.5k16 gold badges95 silver badges159 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Lain Over a year ago

Would type[0] not be more simple in this case? Hmm, although yours seems more readable.

Shalin Patel Over a year ago

Even when I do this, I get such error "TypeError: undefined is not an object (evaluating 'f.CRS_SUBJ_CD.toLowerCase')". Not understanding what that means.

Danyal Over a year ago

Could you show what f and CRS_SUBJ_CD variables are?

StepUp Over a year ago

@La in my view, when startsWith is used, then it is more flexible to set searched string. E.g., .startsWith('Pi') or any another string

StepUp Over a year ago

@ShalinPatel try to write with brackets f.CRS_SUBJ_CD.toLowerCase()

Danyal · Accepted Answer · 2020-06-06 20:54:38Z

3

The reason your code does not work is because you are not accessing the properties right and trying to match a whole object. x.includes('A') is doing a comparison with the whole object that is x.

If you just want to filter the objects in an array based on some specific property in them here's how you can do it.

Sample:

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

Process:

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

Output:

[{id: 1, type: Pizza}]

or in your case if you want to just sort by the first letter, you can do:

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

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

edited Jun 6, 2020 at 20:54

answered Jun 6, 2020 at 20:41

Danyal

8707 silver badges13 bronze badges

8 Comments

charlietfl Over a year ago

contains() does not isolate the first character as OP is asking

Danyal Over a year ago

Oh, sorry, I wanted to use includes(). :)

Shalin Patel Over a year ago

This solution works with the example array you have given but for some reason it is giving me error (undefined is not an object (evaluating 'x.CRS_SUBJ_CD.toLowerCase')). Where CRS_SUBJ_CD is type from example code.

Danyal Over a year ago

Let us continue this discussion in chat.

Shalin Patel Over a year ago

Hey btw I figured out what was causing such error. So basically I was importing csv file and setting all the data from the csv file to a state that I declared. But when declaring that state in constructor I had made extra objects in that array which made the data get confusing and break.

|

Collectives™ on Stack Overflow

How to filter an array of objects by their first letter in react/javascript

2 Answers 2

5 Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related