How to make similar movie through pipes

Question

I'm works at own movie project and want to find similar movies that movie correct by genre. I don't know how to make that

At the moment i created filter using pipe for similar movies and component for view that result. My json is viewed in the view format .ts i created constant. The below this i send that code for pipe and component for your review and wait your answer.

export class SimilarPipe implements PipeTransform {

  transform(items: MovieModel[], filterSimilar: MovieModel): any {
    if (items == null) {
      return items;
    }
    return items.filter(item => item.genres.indexOf(filterSimilar) >= -1);
  }
}
// Controller
function search(nameKey, myArray){
  for (var i=0; i < myArray.length; i++) {
    if (myArray[i].genres === nameKey) {
      console.log(myArray[i])
      return myArray[i];
    }
  }
}
getSimilarGenres() {
    this.route.paramMap
      .switchMap((params: ParamMap) =>
        this.service.getMoviesID(+params.get('id'))
      )
      .takeUntil(this.ngUnscribe)
      .subscribe(movies => {
        const a = Object.values(movies);
        this.movie = a;
        search(a[4], this.movieList);
      });
  }

setSimilarMovies(genre) {
    this.showSimilarMovie ! = genre ? this.showSimilarMovie = genre : this.showSimilarMovie = null;
    this.store.dispatch({type: 'SIMILAR MOVIE'});
  }

<div (load)="setSimilarMovies(genres)"  class="qazaq-video-list-items">
  <div class="qazaq-v-list-items mt-30" *ngFor="let movie of movieList">
    <div class="qazaq-v-list-i-img">
      <img src="assets/image/{{movie.img}}" alt="">
    </div>
    <div class="qazaq-v-list-content">
      <div class="qazaq-v-tag c2">
        <span>{{movie.genres}}</span>
      </div>
      <a [routerLink]="['/movie', movie.id]">{{movie.name}}</a>
      <div class="movie-time">
        <i class="fa fa-clock-o c1"></i>
        <span> {{movie.length}} </span>
      </div>
    </div>
  </div>
</div>

That my html template

<div class="qazaq-v-list-items mt-30" *ngFor="let movie of movieList | similar: showSimilarMovie">
    <div class="qazaq-v-list-i-img">
      <img src="assets/image/{{movie.img}}" alt="">
    </div>
    <div class="qazaq-v-list-content">
      <div class="qazaq-v-tag c2">
        <span>{{movie.genres}}</span>
      </div>
      <a [routerLink]="['/movie', movie.id]">{{movie.name}}</a>
      <div class="movie-time">
        <i class="fa fa-clock-o c1"></i>
        <span> {{movie.length}} </span>
      </div>
    </div>
  </div>

But i resulted my problem and i want know answers that question. Why I don't can make sort by similar genres — Елдос Кадыркул, Jul 16 '19 at 11:58
I see you passing `genres` in `setSimilarMovies()`,is that an array ? Inside the function `showSimilarMovie` & `genre` , are you comparing two arrays or two objects — Ethan Vu, Jul 16 '19 at 12:06
The `genre` is consist array genre types and list of movie is `movieList` variable and I want them comparing and viewed in the html. For Example, this url address [link](https://movies-finder.firebaseapp.com/movie/496243) where "similar movie" block and i want make that — Елдос Кадыркул, Jul 16 '19 at 12:19
@ЕлдосКадыркул Correct me if I am wrong: You have one array which you need to compare and check for duplicates — Prashant Pimpale, Jul 17 '19 at 05:50

score 0 · Answer 1 · answered Jul 16 '19 at 13:10

It is important to know, since Array and Object is reference type, so when you compare two arrays or objects in javascript, it not comparing the values, it comparing the reference :

[{name:'movieA'}] == [{name:'movieA'}] // always return false

// This make the code below always return true

this.showSimilarMovie != genre // always return true

The indexOf function is similar, it find the object or array reference not the values:

[{1:1}].indexOf({1:1}) // always return -1

//this make the code in your transform pipe always return an empty array

return items.filter(item => item.genres.indexOf(filterSimilar) >= -1); // return []

To find if an object exist in an array. You should compare it's property. For example your MovieModel have a property called movieName. Then the right way to find that object would look like this:

items.filter(item => item.genres.find(genre => genre.movieName === filterSimilar.movieName) != undefined);

For comparing Arrays, this is a huge topic. I suggest you visit these questions which is asked on SO:

How to compare arrays in JavaScript?

Comparing Arrays of Objects in JavaScript

The main problem of the code you post is the compare methods is wrong.

I suggest you take sometime to do the research, play around with those reference comparing concept, than apply those to your code to see if there is further specific problems because the question now is too broad.

Hope my answer will help.

Can you that viewed i change controller and added function search but i don't can view that result — Елдос Кадыркул, Jul 17 '19 at 05:42

How to make similar movie through pipes

1 Answers1