title: Processing a complex object by http get in Angular 6
body: <p>I do not understand how to handle the object I subscribe to. The object is the following structure:</p>
  
  <pre><code>{
    data:{
         date: "2018-02-20 13:10:23",
         text: "Описание",
         id: 1,
         items: [
                0: {
                   date: "2018-02-20 13:10:23",
                   text: "Описание",
                   images: [
                           0: "image1.jpg",
                           1: "image2.jpg"
                           ],
                   name: "Изображения",
                   type: "images"
                   },
                1: {
                   date: "2018-02-20 13:10:23",
                   text: "Описание",
                   image: null,
                   type: "video",
                   url: "https://www.youtube.com/embed/v64KOxKVLVg"
                   }
                ]
         }
  }
  </code></pre>
  
  <p>I make an appeal through the service:</p>
  
  <pre><code>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`);
      }
  }
  </code></pre>
  
  <p>There is an interface model:</p>
  
  <pre><code>export class VideoListModel {
      constructor(
          public created_at: string,
          public description: string,
          public id: number,
          public items: any[],
          public name: string
      ) {}
  }
  </code></pre>
  
  <p>And I do the processing in the component:</p>
  
  <pre><code>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[]) =&gt; {
            this.videoTape = data;
            console.log(this.videoTape);
        });
    }
  
      ngOnDestroy() {
          this._subscription2.unsubscribe();
      }
  
  }
  </code></pre>
  
  <p>The task is to make a selection from objects by type: "video". Through AJAX + jQuery did it without problems, and in Angular I'm relatively new. Shoveled a bunch of video lessons yesterday, but nowhere are examples of filtering such complex objects.</p>
  
  <p>Construction:</p>
  
  <pre><code>this._subscription2 = this.videoService.getVideoTape()
            .pipe(filter((data: VideoListModel[]) =&gt; data.items.type === 'video'))
            .subscribe((data: any) =&gt; {
                this.videoTape = data.data;
                console.log(this.videoTape);
            });
  </code></pre>
  
  <p>does not work. The result is an error saying "Property 'items' does not exist on type 'VideoListModel []'". Intuitively, I understand that the matter is most likely in the interface, but I can not understand how to modify the interface so that the filtering works correctly. If someone encountered filtering complex objects, tell me please how to solve this problem.</p>