Angular TypeError: Cannot create property on string '' using Rxjs

Question

Iam using Angular 11, use rxjs and i wont filter my course collection to course with category equal "frontend". but i got some error

My Code :

getPosts():Observable<ICourses[]> {
    return this.http.get<ICourses[]>(`${apiURL}course/getall`).pipe(
      map((courses: ICourses[]) => {
          return Object.values(courses).filter(course => {
            course.devCategory = "frontend"
          })
      })
    )
  }

Error :

ERROR TypeError: Cannot create property 'devCategory' on boolean 'true'

Interface ICourses :

interface ICourses {
   _id: string
   title: string,
   image: string,
   instructor: string,
   topic: string,
   level: string,
   price: number,
   hours: number,
   students: number,
   category: string,
   devCategory: string,
   created_at: Date,
   updated_at: Date
   date: string
}

export {ICourses}

If i use this code :

getPosts():Observable<ICourses[]> {
    return this.http.get<ICourses[]>(`${apiURL}course/getall`).pipe(
      map((courses: ICourses[]) => {
          **return courses.filter(course => {
            course.devCategory = "frontend"
          })**
      })
    )
  }

I got this error :

ERROR TypeError: courses.filter is not a function

have a look to your ICourses interface, it looks like you did something like devCategory: true instead of devCategory: string — Random
– Random, Commented May 15, 2021 at 16:38
Show interface for "Category". It looks like devCatergory property defined there as boolean — Timothy
– Timothy, Commented May 15, 2021 at 16:38
course => course.devCategory === "frontend" the solution for your filter. — Mir entafaz Ali
– Mir entafaz Ali, Commented May 15, 2021 at 18:44
It looks to me, that your course is not ICourses but boolean. — Antoniossss
– Antoniossss, Commented May 15, 2021 at 19:17

Antoniossss · Accepted Answer · 2021-05-15 19:20:42Z

3

This error

ERROR TypeError: Cannot create property 'devCategory' on boolean 'true'

says that this line

course.devCategory = "frontend"

tries to do literally

 true.devCategory="frontend"

which is obviously not what you want to do.

double check what actually is returned in HTTP response as it looks like it is not ICourses[] at all

answered May 15, 2021 at 19:20

Antoniossss

32.7k7 gold badges67 silver badges119 bronze badges

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

Comments

MrCodingB · Accepted Answer · 2021-05-15 19:06:48Z

1

First of all: For filter to work you need to return a boolean value. Also if courses already is an array you won't need Object.values to filter it:

getPosts(): Observable<ICourses[]> {
  return this.http
    .get<ICourses[]>(`${apiURL}course/getall`)
    .pipe(
      map((courses: ICourses[]) => {
        return courses.filter((course) => course.devCategory === "frontend")
      })
    )
}

But you seem to have a problem with your API, because the courses seem to bee boolean values not ICourse objects.

edited May 15, 2021 at 19:06

answered May 15, 2021 at 19:00

MrCodingB

2,3241 gold badge12 silver badges24 bronze badges

3 Comments

Andar Pratama Over a year ago

i got this error : ERROR TypeError: courses.filter is not a function

MrCodingB Over a year ago

Yes because your API returns wrong values

MrCodingB Over a year ago

What does this log in the console .pipe(tap(console.log))

Collectives™ on Stack Overflow

Angular TypeError: Cannot create property on string '' using Rxjs

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related