0

народ, я не понимаю, как обработать объект, на который я подписываюсь. Объект представляет собой следующую структуру:


    {
      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"
                     }
                  ]
           }
    }

Обращение делаю через сервис:

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`);
    }
}

Есть интерфейсная модель:

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

А обработку делаю в компоненте:

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();
    }

}

А задача у меня сделать выборку из объектов по type: "video". Через AJAX+jQuery делал это без проблем, а в Angular я относительно новичок. Перелопатил вчера кучу видео-уроков, но нигде не представлены примеры фильтрации таких сложных объектов.

Конструкция типа:

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

Результатом дает ошибку, мол "Property 'items' does not exist on type 'VideoListModel[]'". Интуитивно я понимаю, что дело скорее всего в интерфейсе, но не могу понять, как интерфейс доработать, чтобы фильтрация работала корректно. Если кто-нибудь сталкивался с фильтрацией сложносоставных объектов, подскажите пожалуйста, как решить эту задачу.

1 ответ 1

0

Ошибка вполне логичная, data.items это массив, у него нет свойства type, оно есть у элементов этого массива. Соответственно внутри subscribe без всякой магии фильтруете все что не нужно.

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;
}

Старайтесь как можно точнее описывать модель данных, чем меньше any тем больше шансов что компилятор заметит ошибку, для того собственно типизация в typescript'е и нужна...

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.