Basically I am creating a video streaming app and trying to display the name object value of Result constructor in my page but apparently it shows nothing and i don't know where I am going wrong.

I am getting an error in the getVideo() function

export class Result {
    constructor(public id: string, public name: string, public imageUrl: string) {}
}
import {Result} from './res.model';

export class Video {
    constructor(
        public categoryId: string,
        public category: string,
        public results: Result[]
        ) {}
}

video.service.ts

private _data = new BehaviorSubject<Video[]>(
    [
      new Video('1', 'Action',
      [
        new Result('10', 'abc0', 'https://cleantechnica.com/files/2017/10/rimac.jpg'),
        new Result('11', 'abc1', 'https://cleantechnica.com/files/2017/10/rimac.jpg'),
        new Result('12', 'abc2', 'https://cleantechnica.com/files/2017/10/rimac.jpg')
      ]),
      new Video('2', 'Drama',
      [
        new Result('20', 'abc3', 'https://cleantechnica.com/files/2017/10/rimac.jpg'),
        new Result('21', 'abc4', 'https://cleantechnica.com/files/2017/10/rimac.jpg'),
        new Result('22', 'abc5', 'https://cleantechnica.com/files/2017/10/rimac.jpg')
      ])
    ]);

   get data() {
    return this._data.asObservable();
  }

   getVideo(resultId: string) {
    this._data.subscribe(videos => {
        return this.videos.find(video => {
          return video.results.find(result => { result.id = resultId; });
        });
    });

}

This is my detailspage.ts

items: Video;
private videoSub: Subscription;
ngOnInit() {
    this.route.paramMap.subscribe(paramMap => {
      if (!paramMap.has('results.id')) {
        return;
      }
     this.videoSub = this.videoService.getVideo(paramMap.get('results.id')).subscribe(video => {
        this.items = video;
      });
    });
  }

detailspage.html

<ion-card>
    <ion-card-content>
      {{items.name}} 
    </ion-card-content>
</ion-card>

getVideo() using map()

getVideos(id: string) {
  return this.data.pipe(take(1), map(result => {
    return {...result.find(p => {
      return {...p.find(videoId => videoId.id === id )};
    })};
  }));
}

I am trying to display 'name' object values abc0,abc1,abc2...

3 Answers

1
whyour On Best Solutions

i think the answer is almost here.

videos: Video[];

get data() {
  return this._data.asObservable();
}

getVideo(resultId: string) {
  this._data.subscribe(videos => {
    const _video = videos.filter(video => video.results.map(x => x.id).indexOf(resultId) !== -1);
    this.videos =  _video;
  });
  return this.videos;
}

// another way, the same file does not need to subscribe to this file variable
getVideo(resultId: string): Video[] {
   const _data = this._data.getValue();
   const _videos = videos.filter(video => video.results.map(x => x.id).indexOf(resultId) !== -1);
   return _videos;
}

the code can work.

0
Community On

Edit:

you have a typo in your code:

getVideo(resultId: string) {
    this._data.subscribe(videos => {
        return this.videos.find(video => {
          return video.results.find(result => { result.id =      resultId; }); // you are using ‘=‘ instead of ‘==‘ here
    });
});
0
onik On

the issue is here

  getVideo(resultId: string) {
    this._data.subscribe(videos => {
        return this.videos.find(video => {
          return video.results.find(result => result.id === resultId);
        });
    });

you are subscribing and returns just go nowhere, you should use map operator, and also you don't need find results you need to check if a video has any results that have same resultIdd so use some function instead of find

 getVideo(resultId: string) {
          return  this._data.pipe(map(videos => {
                return this.videos.find(video => {
                  return video.results.some(result =>  result.id===resultId);
                });
            }));