Angular 16 HttpClient get response from service

Question

I'm trying to do a http client get from my Angular 16 solution. I have created an app\models folder that contains the request and response models that I intend to use with the angular client. I would like to make a request to the API using the BuildInfoRequest and receive the response back from the API into the BuildInfoResponse. I’m not sure of the best way to achieve the end result. The API does not use entity framework or models, but rather returns an observable collection that will match the response models in the angular solution. Ultimately, I would like to receive the response back into a dynamic observable collection and parse through the Json in the angular client. That is my goal in the end.

The request module is defined as such:

export interface BuildInfoRequest
{
   PleaseSelectFlag: boolean | undefined;
   BusinessUnitInfoID: number| undefined;
   ProductionAreaInfoID: number| undefined;
   BuildInfoID: number| undefined;
   IsActiveFlag: boolean| undefined;
}

The response model is as follows:

export interface BuildInfoResponse 
{
    "OrgInfoID": number | undefined
    "OrgLevel": number | undefined
    "BusinessUnitInfoID": number | undefined
    "BusinessUnitOverhead"?: string | undefined
    "BusinessUnit": string | undefined
    "BusinessUnitDescription"?: string | undefined
    "ProductionAreaInfoID"?: number | undefined
    "ProductionArea": string | undefined
    "ProductionAreaDescription": string | undefined
    "BuildInfoID": number | undefined
    "BuildName": string | undefined
    "BuildDescription": string | undefined
    "IsActiveFlag": boolean | undefined
}

When I execute the addbuildinfo component file the call to the API is successfully made, but the buildInfoResponse is undefined. (see image provided below of the error)

import { Component } from '@angular/core';
import { BuildInfoRequest } from 'src/app/models/buildinforequest.model';
import { BuildInfoResponse } from 'src/app/models/buildinforesponse.model';
import { BuildInfoDataService } from 'src/app/services/buildinfodata.service';

@Component({
  selector: 'app-addbuildinfo',
  templateUrl: './addbuildinfo.component.html',
  styleUrls: ['./addbuildinfo.component.css']
})
export class AddbuildinfoComponent 
{
  model: BuildInfoRequest;
  constructor(private buildInfoDataService: BuildInfoDataService )
  {
    this.model = 
    {
      PleaseSelectFlag: true,
      BusinessUnitInfoID: 1,
      ProductionAreaInfoID: 1,
      BuildInfoID: 1,
      IsActiveFlag: true
    };
  }
  buildInfoResponse!: BuildInfoResponse[];
  onFormSubmit()
  {
    this.buildInfoDataService.GetBuildInfo().subscribe((BuildInfoResponse:any) => 
      {
        console.log(BuildInfoResponse);
        //this.buildInfoResponse = buildInfoResponse.value;
      });
  }
}

Here is the buildinfodata.service.ts file, which makes the API call, gets the build info data and is suppose to send the response data to the addbuildinfo component.

import { Injectable } from '@angular/core';  
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { BuildInfoRequest } from '../models/buildinforequest.model'
import { BuildInfoResponse } from '../models/buildinforesponse.model'
import { Observable, of } from 'rxjs';

@Injectable(
    {
        providedIn: 'root'
    }
)  

export class BuildInfoDataService  
{  
    constructor(private http: HttpClient)  
    {   
    }  
        GetBuildInfo() 
        {
          return this.http.get<{[key: string]: BuildInfoResponse}>('https://localhost:7049/TestIT/BuildInfo')
            .pipe(map((BuildInfoResponse) => {
              const buildInfoResponse = [];
              for (const key in BuildInfoResponse)
              {
                if (BuildInfoResponse.hasOwnProperty(key))
                {
                  buildInfoResponse.push({...BuildInfoResponse[key], buildInfoResponse: key})
                }
              }
              console.log(buildInfoResponse);
            }));
    }
} 

The information is being loaded to the buildInfoResponse observable collection as expected from the API, but it's failing to be returned to the addbuildinfo component:

Here is the observable collection response back from the API:

Answer 1

It's because of GetBuildInfo is not returning the buildInfoResponse array in the Ngrx.map operator. That's why the component AddbuildinfoComponent receives undefined. Here is the working code:

 GetBuildInfo() 
    {
      return this.http.get<{[key: string]: BuildInfoResponse}>('https://localhost:7049/TestIT/BuildInfo')
        .pipe(map((BuildInfoResponse) => {
          const buildInfoResponse = [];
          for (const key in BuildInfoResponse)
          {
            if (BuildInfoResponse.hasOwnProperty(key))
            {
              buildInfoResponse.push({...BuildInfoResponse[key], buildInfoResponse: key})
            }
          }
          console.log(buildInfoResponse);
          //here
          return buildInfoResponse;
        }));