Can't pull json data from service into component to display

Question

New to Angular and I'm trying to follow a tutorial. I'm pulling data into a shared service via an http call but from there I can't seem to get it into my component to be displayed in a table. I can log the data after it comes into the service so I know the pull is happening, but despite having set up a subscription in my component, the value there remains undefined. I thought I would just start with trying to map a few fields so that I can make sure it's working before I create the rest... Anyone know what I'm doing wrong? Probably a lot of things :P

IPix.ts

export interface IPix {
  legacyConfigTrackerId: number;
  contract: IContract;
  selected: boolean;
}

IContract.ts

export interface IContract {
    contractEffectiveDate: string;
}

pix-search.service.ts

@Injectable({
  providedIn: 'root',
})
export class PixSearchService {
  constructor(private http: HttpClient) {}

  pixUrl: string =
    'https://pix.example-dev.example.com/pix?startRow=0&endRow=1';

  getPixData(): Observable<IPix[]> {
    const headers = new HttpHeaders({
      'x-api-key':
        'ewogICAgImFwadgfdgUtleSIgOiAiMTIzIiWQiIDogIlBESSBEZXZlbgdgG9wZXIiCn0=',
    });

    return this.http
      .get<IPix[]>(this.pixUrl, {
        headers,
      })
      .pipe(
        tap((data) => console.log('All:', JSON.stringify(data))),
        catchError(this.handleError)
      );
  }

  handleError(err: HttpErrorResponse) {
    let errorMessage = '';
    if (err.error instanceof ErrorEvent) {
      errorMessage = `An error occurred: ${err.error.message}`;
    } else {
      errorMessage = `Server returned code:: ${err.status}, error message is: ${err.message}`;
    }

    console.error(errorMessage);
    return throwError(() => errorMessage);
  }
}

pix-table.component.ts

@Component({
  selector: 'pix-table-component',
  templateUrl: 'pix-table.component.html',
  styleUrls: ['pix-table.component.css'],
  providers: [PixSearchService, PixEditDialogComponent],
})
export class PixTableComponent implements IPix, IContract, OnInit, OnDestroy {
  columns = [
    'ID',
    'Network',
    'LOB',
    'HP Code',
    'Atypical',
    'TIN',
    'GNPI',
    'Org',
    'Business Unit Code',
    'National Contract',
    'National ContractType',
    'Contract Type',
    'Super Group',
    'Contract Entity',
    'Contract ID',
    'Amendment ID',
    'Contract Effective Date',
    'Contract Termination Date',
  ];

  rows: any;
  tableSize: TableSize = 'small';
  showHover = true;
  sticky: TableStickyType = 'horizontal';
  scrollType: TableScrollType = 'both';
  label = 'Pix';
  disabled = 'disabled';
  error = 'error';
  maxlength = 'maxlength';
  showCounter = false;

  elevation: CardElevation = 'medium';

  subscription!: Subscription;

  legacyConfigTrackerId!: number;
  terminationDate!: string;
  recordId!: number;
  network!: string;
  lineOfBusiness!: string;
  healthPlanCode!: string;
  isAtypical!: string;
  tin!: string;
  groupNpi!: string;
  org!: string;
  businessUnitCode!: string;
  isNational!: string;
  nationalContractType!: string;
  contractType!: string;
  isSuperGroup!: string;
  contractEntity!: string;
  contractId!: string;
  amendmentId!: string;
  contractEffectiveDate!: string;
  effectiveDate!: string;
  contract!: IContract;
  selected: boolean = false;

  constructor(
    private pixSearchService: PixSearchService,
    private pixEditDialog: PixEditDialogComponent
  ) {}

  pixRecords: IPix[] = [];
  errorMessage: string = '';

  ngOnInit(): void {
    this.subscription = this.pixSearchService.getPixData().subscribe({
      next: (pixRecords) => {
        this.pixRecords = pixRecords;
      },
      error: (err: string) => {
        this.errorMessage = err;
      },
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

  open(row: any) {
    this.pixEditDialog.open(row);
  }
}

pix-table.component.html

<div kds-table-scroll [scrollType]="scrollType">
  <kds-table
    [size]="tableSize"
    [showHover]="showHover"
    [striped]="true"
    [sticky]="sticky"
  >
    <thead>
      <tr kds-table-row>
        <th kds-table-heading *ngFor="let col of columns">{{ col }}</th>
      </tr>
    </thead>
    <tbody>
      <tr
        kds-table-row
        *ngFor="let row of pixRecords"
        [selected]="row.selected"
        (click)="open(row)"
      >
        <td kds-table-data>{{ row.legacyConfigTrackerId }}</td>
        <td kds-table-data>{{ row.contract.contractEffectiveDate }}</td>
      </tr>
    </tbody>
  </kds-table>
</div>

sample json payload

{
    "totalCount": 1,
    "results": [
        {
            "status": "Active",
            "claimType": "M",
            "payClass": "FLLBCORP",
            "noPayClassReason": "",
            "id": "5df4443a7eefff0710c04760",
            "legacyConfigTrackerId": "217",
            "rateEscalator": "No",
            "product": {
                "healthPlanCode": "FL",
                "orgType": "EX",
                "lineOfBusiness": "EX",
                "businessUnitCode": "EX",
                "programCode": "EX",
                "carrierCode": "EX",
                "network": "Example Network"
            },
            "provider": {
                "groupNpi": "123456789",
                "tin": "123456789",
                "isAtypical": "No",
                "superGroup": ""
            },
            "contract": {
                "type": "Example",
                "name": "Example",
                "emptorisNumber": "47745",
                "amendmentId": "",
                "pixContractType": "Example",
                "effectiveDate": "07/01/2010",
                "isStandard": "Yes",
                "isNational": "Yes",
                "isLessorOf": "Yes",
                "nuances": "",
                "isTimelyFiling": ""
            },
            "changeRequest": {},
            "capitation": {},
            "audit": {
                "createdBy": "Developer",
                "modifiedBy": "Developer",
                "validation": [],
                "created": "05/30/2013 08:31 AM CDT",
                "modified": "09/28/2021 10:44 AM CDT"
            },
            "hnetAudit": {
                "dataValidationValue": ""
            },
            "deleted": "No"
        }
    ]
}

Answer 1

The response shared is an object but not an array of IPix type. Believe that you need to get the results value from the response.

You can achieve this with map operator from rxjs.

map((data: any) => data.results as IPix[])

Your getPixData method should be as below:

import { map } from 'rxjs';

getPixData(): Observable<IPix[]> {
  ...

  return this.http
    .get<any>(this.pixUrl, {
      headers,
    })
    .pipe(
      tap((data) => console.log('All:', JSON.stringify(data))),
      map((data: any) => data.results as IPix[])
      catchError(this.handleError)
    );
}

Answer 2

the response is different from interface IPix so it can't read.if you want start with trying to map a few fields you can try this.

export interface IPix {
  totalCount: number;
}

the IPix.totalCount should map the totalCount inresponsive (=1)