people, I do not understand how to handle the object to which I subscribe. The object is the following structure:

     {
       data: {
            date: "2018-02-20 13:10:23",
            text: "Description",
            id: 1,
            items: [
                   0: {
                      date: "2018-02-20 13:10:23",
                      text: "Description",
                      images: [
                              0: "image1.jpg",
                              1: "image2.jpg"
                              ],
                      name: "Images",
                      type: "images"
                      },
                   one: {
                      date: "2018-02-20 13:10:23",
                      text: "Description",
                      image: null,
                      type: "video",
                      url: "https://www.youtube.com/embed/v64KOxKVLVg"
                      }
                   ]
            }
     }

I make a request through the service:

import {HttpClient} from '@angular/common/http'; import {Injectable} from '@angular/core'; @Injectable() export class VideoService { constructor(private http: HttpClient) {} getVideoTape() { return this.http.get(`http://ip_adress/api/v1/mixed_galleries/1`); } }

There is an interface model:

 export class VideoListModel { constructor( public created_at: string, public description: string, public id: number, public items: any[], public name: string ) {} }

And I do the processing in the component:

 import {Component, OnDestroy, OnInit} from '@angular/core'; import {Observable, Subscription} from 'rxjs'; import {filter} from 'rxjs/operators'; import {VideoService} from '../shared/services/video.service'; import {VideoListModel} from '../../shared/models/video-list.model'; @Component({ selector: 'app-video-index', templateUrl: './video-index.component.html', styleUrls: ['./video-index.component.scss'] }) export class VideoIndexComponent implements OnInit, OnDestroy { private videoTape = []; private _subscription2: Subscription; constructor( private videoService: VideoService ) { } ngOnInit() { this._subscription2 = this.videoService.getVideoTape() .subscribe((data: VideoListModel[]) => { this.videoTape = data; console.log(this.videoTape); }); } ngOnDestroy() { this._subscription2.unsubscribe(); } }

And my task is to make a selection of objects by type: "video". Through AJAX + jQuery, I did it without any problems, and in Angular I am relatively new. Shoveled yesterday a bunch of video lessons, but nowhere are examples of filtering such complex objects.

Type design:

 this._subscription2 = this.videoService.getVideoTape() .pipe(filter((data: VideoListModel[]) => data.items.type === 'video')) .subscribe((data: any) => { this.videoTape = data.data; console.log(this.videoTape); });

The result is an error, saying "Property 'items' does not exist on type 'VideoListModel []'". Intuitively, I understand that the case is most likely in the interface, but I cannot understand how to modify the interface so that filtering works correctly. If someone faced with the filtration of complex objects, please tell me how to solve this problem.

    1 answer 1

    The error is quite logical, data.items is an array, it does not have a type property, the elements of this array have it. Accordingly, inside the subscribe without any magic, filter everything that is not needed.

     if (data && data.items) { let i = data.items.length; while(i--) { if (data.items[i].type != 'video') { data.items.splice(i, 1); } } this.videoTape = data; }

    Try to describe the data model as accurately as possible, the less any the more chances that the compiler will notice an error, for the actual typing in typescript is needed ...