Как я могу манипулировать через операторы rxjs объектом, который я получаю из запроса?

Question

Мой вопрос: Как я могу манипулировать объектом в списке объектов, который я получаю из HTTP-запроса. Например, я получаю список объектов с каждым объектом, как

{
    start:start,
    end:end,
    title:title,
}

Мне нужно изменить на

{
    start: new Date(start),
    end: new Date(end),
    title:title,
    draggable:true,
    resizable:true,
}

мой код

this.http.get('https:url-to-guest-events').pipe(
    //what operator can i use, map maybe?
)
.subscribe(
    events => this.events = events;
)

Answer 1

Используйте оператор map вместе с деконструкцией объекта для получения кратчайшего результата:

this.http.get('https:url-to-guest-events').pipe(
    map(({start, end, title}) => ({
        start: new Date(start),
        end: new Date(end),
        title: title,
        draggable: true,
        resizable: true,
    }))
)
.subscribe(
    events => this.events = events
)

В случае, если вы получаете массив от вашей конечной точки HTTP (что можно предположить из-за именования events)Я бы предложил использовать mergeMap и toArray для сопоставления каждого элемента, а затем собрать результаты, как показано ниже:

this.http.get('https:url-to-guest-events').pipe(
    mergeMap(result => result),
    map(({start, end, title}) => ({
        start: new Date(start),
        end: new Date(end),
        title: title,
        draggable: true,
        resizable: true,
    })),
    toArray()
)
.subscribe(
    events => this.events = events
)

mergeMap приведет к потоковой передаче всех элементов массива в отдельные уведомления.После сопоставления toArray соберет все уведомления и поместит их обратно в массив, который будет удобен для последующего назначения в функции subscribe.

Answer 2

Оператор map предназначен для преобразования / изменения данных в потоке.

.pipe(
  map( original => {
    // code here to modify the original
    // be sure to call return on the result
  })
)

Абсолютно простейшее преобразование, которое вы могли бы сделать:

.pipe(
  map( original => {
    return {
      start: original.start,
      end: original.end,
      title: original.title,
      draggable: true,
      resizable: true
    }
  })
)

Я бы лично объявил класс и просто установил значения, но если вы просто используете объекты / хэши произвольной формы, этого будет достаточно.

Вот демонстрация StackBlitz: https://stackblitz.com/edit/typescript-3mdpjo?file=index.ts&devtoolsheight=100