Angular returning observable object from Objservable Array of objects:

Question

I would like to return an Observable object from a Observable Array or objects. getTodoById() I tried to return by using pipe & map operators. Err messsages:

Type 'Observable<Todo | undefined>' is not assinable to type 'Observable'. Type 'Todo | undefined is not assignable to type 'Todo'. ts(2322)

I tried assigning "?" sign but it wasn't very useful. Maybe I did it wrong. This is my current code. I tried Observable<Todo | undefined> as a return type to getById() it showed the same error.

todo service:

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable, of, Subscription, pipe } from 'rxjs';
import { map } from 'rxjs/operators';
import { FilterBy } from '../models/filterBy.model';
import { SortBy } from '../models/sortBy.model';
import { Todo } from '../models/todo.model';

// this is BehaviorSubject - Can get .next
  private _todos$ = new BehaviorSubject<Todo[]>([])

  // this is an Observable - we CANNOT do .next.
  // It acts like a getter - You can list to it's changes
  // this makes a good separation!
  public todos$ = this._todos$.asObservable();

      public getById(id: string): Observable<Todo> {
    return this.todos$.pipe(map(todos=> todos.find(todo => todo._id === id)))
  }

todo model:

export interface Todo {
  _id: string,
  title:string,
  date:Date,
  isDone:boolean,
  importance:number
}

Didn't help. to add : Observable<Todo | undefined> as a return type to getVyId @MikeOne — Uri Gross
– Uri Gross, Commented Nov 7, 2021 at 12:45
Array.prototype.find() returns the found item or undefined. Changing return type of function should fix. Were you getting a different error after the change? — BizzyBob
– BizzyBob, Commented Nov 7, 2021 at 12:48
@BizzyBob - I got the exact error after changing the return type ( Added undefined) — Uri Gross
– Uri Gross, Commented Nov 7, 2021 at 14:00

Fateh Mohamed · Accepted Answer · 2021-11-07 13:32:45Z

2

Have you tried to add filter operator

return this.todos$.pipe(
  map(todos=> todos.find(todo => todo._id === id)),
  filter(todo => !!todo)
)

answered Nov 7, 2021 at 13:32

Fateh Mohamed

21.5k5 gold badges46 silver badges56 bronze badges

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

1 Comment

Saber Bjeoui Over a year ago

Why use filter ??

Saber Bjeoui · Accepted Answer · 2021-11-07 16:04:07Z

1

You need to add undefined as a return type to getById because you are using find() and typescript is smart enough to know that your array will not always return a value.

  public getById(id: string): Observable<Todo | undefined> {
    return this.todos$.pipe(map(todos=> todos.find(todo => todo._id === id)))
  }

Or if you don't want to return undefined as a return value you can use casting as follows:

  public getById(id: string): Observable<Todo> {
    return this.todos$.pipe(map(todos=> todos.find(todo => todo._id === id))) as Observable<Todo>
  }

but I prefer the first solution

answered Nov 7, 2021 at 16:04

Saber Bjeoui

1249 bronze badges

Comments

Uri Gross · Accepted Answer · 2021-11-08 08:17:03Z

0

Thank you for your answers and trying to help. I decided to go for a simpler way which is:

  public getById(id: string): Todo | undefined{
    const todos = this._todos$.getValue();
    return todos.find(todo => todo._id === id);
  }

answered Nov 8, 2021 at 8:17

Uri Gross

5241 gold badge8 silver badges21 bronze badges

1 Comment

DeborahK Over a year ago

"Important note from the author of RxJS 5: Using getValue() is a HUGE red flag you're doing something wrong. It's there as an escape hatch. Generally everything you do with RxJS should be declarative. getValue() is imperative. If you're using getValue(), there's a 99.9% chance you're doing something wrong or weird. – Ben Lesh Jul 21 '17 at 0:01 Link here: stackoverflow.com/questions/37089977/… (see the answers)

Collectives™ on Stack Overflow

Angular returning observable object from Objservable Array of objects:

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related