Объединить два json вместе в один json в функции ngOnInit

Question

У меня есть компонент Angular, который при загрузке вызова сервисных методов 2 и этих методов возвращает данные обратно в формате json.Я хочу объединить эти два jsons вместе.Я просмотрел некоторые другие потоки и обнаружил, что Object.assign может использоваться для этой цели, но проблема в том, что я добавляю данные к объектам внутри функции подписчика, а Object.assign находится вне функции подписчика, поэтому объекты не определены вне подписчика.функция.Вот мой код

export class UpcomingClassesComponent implements OnInit {

  times: ClassTimes = new ClassTimes();
  schedule: ClassSchedule = new ClassSchedule();
    classes: any; 
    timing: any;
    data: any;

  constructor(private router:Router,
              private _classService: ClassServiceProxy) {

  }

  ngOnInit() {
    this._classService.GetClassData()
    .subscribe((result: any) => {
      this.schedule = result;
      this.classes = this.schedule;
      //console.log(this.classes);
    })

    this._classService.GetClassTimes()
    .subscribe((data: any) => {
      this.times = data;
      this.timing = this.times;
      //console.log(this.timing);
    })

    let completeData = Object.assign({}, this.classes, this.timing);
    console.log(completeData); 

    }

CompleteData возвращает мне объект в консоли и ничего больше

Answer 1

попробуй forkJoin

 forkJoin([_classService.GetClassTimes(),_classService.GetClassTimes()
  ]).subscribe((result: any[]) => {

    this.schedule = result[0];
    this.classes = this.schedule;

    this.times = result[1];
    this.timing = this.times;

   let completeData = {...this.classes, ...this.timing];
   console.log(completeData);
  })

https://stackblitz.com/edit/angular-2tyv93

Answer 2

Я думаю, что вы можете использовать Promise

ngOnInit() {
  let dataPromise = new Promise((resolve) => {
    this._classService.GetClassData()
    .subscribe((result: any) => {
      resolve(result[0]);
    })
  });

  let timesPromise = new Promise((resolve) => {
    this._classService.GetClassTimes()
    .subscribe((result: any) => {
      resolve(result[0]);
    })
  });

  Promise.all([dataPromise, timesPromise])
  .then((values) => {
    console.log(values);
    let completeData = { ...values[0], ...values[1]};
    // let completeData = Object.assign({}, values[0], values[1]);
    console.log("final results : ", completeData); 
  });
}

Answer 3

Попробуйте это:

this._classService.GetClassTimes()
    .subscribe((data: any) => {
      this.times = data;
      this.timing = this.times;
      this._classService.GetClassData()
      .subscribe((result: any) => {
      this.schedule = result;
      this.classes = this.schedule;
      //console.log(this.classes);
})
      this.completeData();
      //console.log(this.timing);
    })

completeData() {
let completeData = { ...this.classes, ...this.timing};
    console.log(completeData);
}

Answer 4

ForkJoin - лучший подход, но рекомендуется не использовать индексы в своей подписке.Лучшим подходом было бы использовать tap там, где мы присваиваем объект по мере его разрешения.Это помогает не вручную индексировать результаты и помогает поддерживать масштабируемость.

forkJoin([
  classes.pipe(tap(res => {
    Object.assign(completeData, res)
  })),
  timing.pipe(tap(res => {
    Object.assign(completeData, res)
  }))
]).subscribe(_ => {
  //do your further login
  console.log(completeData)
})

Stackblitz на https://stackblitz.com/edit/angular-forkjoin-with-tap