Как построить один объект из 2 HTTP-запросов в угловых, без добавления другого значения

Question

Если вы посмотрите на этот вопрос . проблема была действительно простой, но решения были более сложными, для решения более подробной информации я задаю этот вопрос.

Если вы посмотрите на stackblitz в сервисе, код попытается построить объект перед передачей его компоненту. Проблема, с которой я сталкиваюсь, заключается в значении ключа, которое добавляется кодом и нарушает управление формой.

первый ответ возвращает объект с маршрутами, которые имеют только эти значения.

      addressPointId: "adress",
      municipalityId: "municipallyty",
      regionId: "regionId",
      settlementId: "settlementId",
      rvId: "rvId", // <---  not included in second call getAddressPoint 
      sequenceNumber: "sequenceNumber" // <---  not included in second call getAddressPoint 

второй запрос http принимает эти значения и возвращает его со значениями имени, но исключая rvId и sequenceNumber.

    addressPointId: "adress",
    municipalityId: "municipallyty",
    regionId: "regionId",
    settlementId: "settlementId",
    regionName: "regionName", // <---  this is added 
    municipalityName: "municipalityName", // <---  this is added
    settlementName: "settlementName", // <---  this is added
    description: "description",

Я хочу получить объект результата.

{ <-- coming from first request getRequest
     "statusId": 1,
     "recDate": "2019-04-18T11:05:25.827Z",
     "requestVehicles": [
         {
             "garageId": 1,
             "routes": [
                 {
                     "addressPointId": "dasdad", // <-- is in both
                     "municipalityId": 34, // <-- is in both
                     "regionId": 4, // <-- is in both
                     "rvId": "",  // <-- coming from first request getRequest
                     "sequenceNumber": "", // <-- coming from first request getRequest
                     "settlementId": null, // <-- is in both
                     "regionName": "dasd", // <-- coming from second request getAddressPoint
                     "municipalityName": "dasdasd", // <-- coming from second request getAddressPoint
                     "settlementName": null, // <-- coming from second request getAddressPoint
                     "description": "Nadaburi" // <-- coming from second request getAddressPoint
                 } 
             ],
         }
     ],
 }

(к сожалению, я не могу исправить стек), теперь я получаю это на моем реальном проекте:

{ <-- coming from first request getRequest
     "statusId": 1,
     "recDate": "2019-04-18T11:05:25.827Z",
     "requestVehicles": [
         {
             "garageId": 1,
             "routes": [
                 { // =================================
                     "key": { key object } // <========== this breaks the fromcontrols
//============================================================
                     "addressPointId": "dasdad", // <-- is in both
                     "municipalityId": 34, // <-- is in both
                     "regionId": 4, // <-- is in both
                     "rvId": "",  // <-- coming from first request getRequest
                     "sequenceNumber": "", // <-- coming from first request getRequest
                     "settlementId": null, // <-- is in both
                     "regionName": "dasd", // <-- coming from second request getAddressPoint
                     "municipalityName": "dasdasd", // <-- coming from second request getAddressPoint
                     "settlementName": null, // <-- coming from second request getAddressPoint
                     "description": "Nadaburi" // <-- coming from second request getAddressPoint
                 } 
             ],
         }
     ],
 }

исходный код исходит от stackblitz. . Я изменил это в соответствии с моим реальным сценарием.

по какой-то причине новый stackblitz не работает, но он отлично работает для моего реального проекта, кроме дополнительного значения ключа в ответе.

Answer 1

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

во-первых, вы можете просто создать нужный объект в самом вызове (т.е. в файле component.ts)

const id = this.getIdFromRoute(this.route, 'customerId');

let customerWithSource: ICustomer;

this.customerService.getById(id)
    .subscribe((customer) => {
        this.customerSourceService.getById(customer.SourceId)
            .subscribe((source) => {
                customerWithSource = customer;
                customerWithSource.CustomerSource = source;
            });
        });

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

    getCustomerWithSource(id: number): Observable<ICustomer> {
        return this.getById(id).pipe(
            concatMap((customer) => {
                return this.customerSourceService
                    .getById(customer.SourceId)
                    .pipe(
                        map((source) => {
                            customer.CustomerSource = source;
                            return customer;
                        }),
                    );
            }),
        );
    }

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

Answer 2

Я думаю, что вы можете использовать RxJs ОбъединитьПоследний , чтобы достичь того, что вы хотите.

Если вы объедините результат первого и следующего вызова с combineLast, то сможете подписаться и получить оба объекта и вернуть комбинацию обоих.

Вот пример:

const objA = {xpto: 'xis'};
const objB = {moreData: 'pato'};


of(objA).pipe(
  map((a) => {
    return combineLatest(of(a), of(objB));
  })
).subscribe((result) => {
  result.pipe(
    map(([a, b]) => {
      return {
        newXpto: a.xpto,
        newMoreData: b.moreData
      };
    })
  ).subscribe((combinedObjects) => {
    console.log(combinedObjects);
   })
})

Нечто подобное должно работать. Я не знаю, является ли это более строгим ответом, но я сделал это быстро. Тем не менее, это дает вам ощущение того, как вы могли бы это сделать.