Search code examples
javascriptrxjsjavascript-objectsrxjs6rxjs-observables

Object.values filter on 'keypress'


As I'm using this technique to get dummy data from SWAPI.

const httpStarwars$ = createHttpObservables('https://swapi.dev/api/films/');    
fromEvent<any>(this.sTxt.nativeElement,'keypress').pipe(
   map(event => event.target.value),
   debounceTime(400),
   distinctUntilChanged(),
   switchMap(val => httpStarwars$.pipe(
      map(res => Object.values(res["results"]))
   ))
).subscribe(courses => console.log(courses));

Here is the expected result after key press.

0: {title: "A New Hope", episode_id: 4, opening_crawl: "It is a period of civil war.
↵Rebel spaceships, st…er
↵people and restore
↵freedom to the galaxy....", director: "George Lucas", producer: "Gary Kurtz, Rick McCallum", …}
1: {title: "The Empire Strikes Back", episode_id: 5, opening_crawl: "It is a dark time for the
↵Rebellion. Although the… remote probes into
↵the far reaches of space....", director: "Irvin Kershner", producer: "Gary Kurtz, Rick McCallum", …}
2: {title: "Return of the Jedi", episode_id: 6, opening_crawl: "Luke Skywalker has returned to
↵his home planet of…
↵struggling to restore freedom
↵to the galaxy...", director: "Richard Marquand", producer: "Howard G. Kazanjian, George Lucas, Rick McCallum", …}
3: {title: "The Phantom Menace", episode_id: 1, opening_crawl: "Turmoil has engulfed the
↵Galactic Republic. The t…ustice in the
↵galaxy, to settle the conflict....", director: "George Lucas", producer: "Rick McCallum", …}
4: {title: "Attack of the Clones", episode_id: 2, opening_crawl: "There is unrest in the Galactic
↵Senate. Several t…THE REPUBLIC
↵to assist the overwhelmed
↵Jedi....", director: "George Lucas", producer: "Rick McCallum", …}
5: {title: "Revenge of the Sith", episode_id: 3, opening_crawl: "War! The Republic is crumbling
↵under attacks by t…ate mission to rescue the
↵captive Chancel

Now I want to filter the result of the above data below using filters.

map(res => Object.values(res["results"]))

What I will filter is title. So far what I used is this technique below.

map(res => Object.values(res["results"]).filter(j => j["title"] == res))

It gave me empty array like this [].

UPDATE 1:

array of object

Update 2: error


Solution

  • Update 1

    I edit my answer to use Typescript.


    I think that what you want to do is just filter your response by title, so you can just do that:

    interface Movie {
      title: string;
      episode_id: number;
    }
    
    const res = {};
    
    res["results"] = { 
      0: {title: "A New Hope", episode_id: 4}, 
      1: {title: "The Empire Strikes Back", episode_id: 5 },
      2: {title: "Return of the Jedi", episode_id: 6}, 
      3: {title: "The Phantom Menace", episode_id: 1},
      4: {title: "Attack of the Clones", episode_id: 2} 
    }
    
    const result = Object.values(res["results"]).filter((movie: Movie) => movie.title === "A New Hope")
    
    console.log(result)

    Just remember to verify before if res["results"] contains the object with the movies.