Собрать данные в один объект из нескольких запросов RxJS

118

29 августа 2019, 11:40

На OnInitе нужно иметь массив:

 let finalArray = [
 {code:7865, price:203, color: red},
 {code:8865, price:303, color: pink},
 ...]

Из запроса на url1 получаем массив объектов по количеству которых, забрав из каждого его id, делаем дополнительные запросы на url2, получаем значения для 'price' и 'color'.

Как собрать весь объект с code, price и color, если code приходит с url1 ?

 finalArray = [];
  this.httpService.getDataFromServer(url1)
    .pipe(
      map(resp => {
        // здесь приходит 'code'
        const ordersArray = [];
        for (const items of resp) {
          ordersArray.push(items.id);
        }
        return ordersArray;
      }),
      switchMap(data => {
        return forkJoin(
          data.map((order) => {
            return this.httpService.getDataFromServer(url2 + '/' + order);
          })
        );
      })
    ).subscribe(resp => {
      const arr = [];
      for (const patient of resp) {
        const object = {};
        object['price'] = patient.price;
        object['color'] = patient.color;
        arr.push(object);
      }
      this.finalArray = arr;
    });

Answer 1

Вариантов решения данной проблемы на самом деле не очень много, один из - это кешировать в какой-то переменной объявленной выше перед запросом, другой вариант сделать все более реактивно используя просто маппинг потока:

this.httpService.getDataFromServer(url1).pipe(
    map((response) => {
        // здесь приходит `code`
        const orders = [];
        const codes = [];
        for (const item of response) {
            orders.push(item.id);
            // также пушим в отдельный массив наш `code`
            codes.push(item.code);
        }
        // а здесь возвращаем уже не массив `orders`,
        // а объект с `{ orders: [], codes: [] }`
        return { orders, codes };
    }),
    switchMap(({ orders, codes }) => {
        orders = orders.map((order) => this.httpService.getDataFromServer(url2 + '/' + order));
        return forkJoin(orders).pipe(
            // а здесь маппим на объект `{ codes: [], patients: [] }`
            map((patients) => ({ codes, patients }))
        );
    })
).subscribe(({ codes, patients }) => {
    for (let i = 0, length = patients.length; i < length; i++) {
        const { price, color } = patients[i];
        const code = codes[i];
        this.finalArray.push({ price, color, code });
    }
});

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