Как изменить данные, которые выбираются из наблюдаемой?

Question

Я хочу получить данные из API (списки фильмов с различной информацией). Я довольно плохо знаком с наблюдаемыми и продолжаю путаться. Поэтому я хочу добиться того, чтобы объединить базовый путь и путь плаката (это я получаю из API) и получить плакат для отображения в виде.

Я могу получить название фильмов из API, но я не могу объединить базовый URL с путем к постеру. Любая помощь или указания о том, как работать с наблюдаемыми, очень ценится.

Сервис, который я использую для извлечения данных

export class MoviesService {

  private _url: string = 'https://api.themoviedb.org/3/movie/popular?api_key=<<API KEY>>&language=en-US&page=2'
  constructor(private http: HttpClient) { }

  getmovies(): Observable<IMovie[]> {
    return this.http.get<IMovie[]>(this._url);
  }
}

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

Answer 1

Насколько я понимаю, вы ищете операторы rxjs, специально для операторов "Transforming", которые можно найти по адресу: https://www.learnrxjs.io/operators/transformation/

С этим вы можете работать с данными, которые излучает ваш Observable, в любое время.

Если предположить, что структура вашего IMovie похожа на следующую, вы попадете на правильный путь.

getmovies(): Observable<{connectedURL: string}[]> {
    return this.http.get<IMovie[]>(this._url).pipe(
       map( (movies:IMovie[]) => {
           result = [];
           movies.forEach( (movie) => {
              result.push(movie.getBaseURL() + movie.getPosterURL());
           }
           return result;
       })
    );
  }

Все, что вам нужно, это взять ваш массив фильмов и создать новый массив с вашими подключенными URL-адресами. Таким образом, ваш getMovies () возвращает ваш измененный список. Конечно, вы можете сделать карту () - оператор где-то еще в вашей логике или даже создать какой-то другой вид объекта с информацией вашего IMovie [].

Надеюсь, это поможет.

Начинать с Observables и Operators - довольно большая вещь, поэтому вам обязательно нужно проверить ссылку выше.

Не стесняйтесь поправлять меня:)

Answer 2

Concat испускать излучения двух или более наблюдаемых, не чередуя их1

Оператор Concat объединяет выходные данные нескольких наблюдаемых, так что они действуют как одна наблюдаемая, причем все элементы, испускаемые первой наблюдаемой, испускаются до любого из элементов, испускаемых второй наблюдаемой (и т. Д., Если есть больше двух).

Concat ожидает подписки на каждую дополнительную Наблюдаемую информацию, которую вы передаете ей, пока не завершится предыдущая Наблюдаемая. Обратите внимание, что из-за этого, если вы попытаетесь объединить «горячий» Observable, то есть тот, который начинает испускать элементы немедленно и до того, как он подписан, Concat не будет видеть и, следовательно, не будет испускать любые элементы, которые Observable испускает раньше все предыдущие наблюдаемые завершены, и Concat подписывается на «горячую» наблюдаемую.

RxJs Примеры для Concat:

Пример 1. Базовое использование конкатов с тремя наблюдаемыми

// RxJS v6+
import { of, concat } from 'rxjs';

concat(
  of(1, 2, 3),
  // subscribed after first completes
  of(4, 5, 6),
  // subscribed after second completes
  of(7, 8, 9)
)
  // log: 1, 2, 3, 4, 5, 6, 7, 8, 9
  .subscribe(console.log);

Пример 2: конкат с задержкой наблюдаемой

// RxJS v6+
import { of, concat } from 'rxjs';
import { delay } from 'rxjs/operators';

concat(
  of(1, 2, 3).pipe(delay(3000)),
  // after 3s, the first observable will complete and subsquent observable subscribed with values emitted
  of(4, 5, 6)
)
  // log: 1,2,3,4,5,6
  .subscribe(console.log);