Getting undefined using Async in angular 8

Question

using console.log(jobdetails) data is visible in the console but getting undefined on accessing its property console.log(jobdetails.id) .

<div class="job-post-item p-4 d-block d-lg-flex align-items-center" *ngIf="jobdetailsdata$ | async as jobdetails">
  <div class="one-third mb-4 mb-md-0">
    <div class="job-post-item-header align-items-center">
      <span class="subadge">Partime</span> {{this.log(jobdetails.id)}}
      <h2 class="mr-3 text-black"><a href="#">{{jobdetails.name}}</a></h2>
    </div>
    <div class="job-post-item-body d-block d-md-flex">
      <div class="mr-3"><span class="icon-layers"></span> <a href="#">{{jobdetails.color}}</a></div>
      <div><span class="icon-my_location"></span> <span>{{jobdetails.pantonevalue}}</span></div>
    </div>
  </div>
</div>

Test API Url : Here it is

component.ts

export class JobdetailsComponent implements OnInit {

  jobdetailsdata$: Observable<Jobdetails>;
  constructor(
     private router: Router,
     private route: ActivatedRoute,
     private jobservice: JobserviceService
              ) { }

  ngOnInit() {
    this.jobdetailsdata$ =  this.route.paramMap.pipe(
      switchMap((params: ParamMap) => this.jobservice.getJobsById(params.get('id'))
      )
    );
    // this.jobservice.getJobsById(2).subscribe(value => console.log(value));
  }

  log(val): void { console.log(val); }   
}

class used:

export class Jobdetails {
    id: number;
    name: string;
    year: number;
    color: string;
    pantonevalue: string;
}

Answer 1

 /* data.interface.ts */ export interface adObject{ company: string, text: string, url: string } export interface dataObject{ color: string, id: number, name: string, pantone_value: string, year: number } export interface jobDetail{ ad: adObject, data: dataObject } //Service /* test.service.ts */ import { Injectable } from '@angular/core'; import { HttpClient, HttpErrorResponse, HttpHeaders } from "@angular/common/http"; @Injectable() export class TestService { constructor(private http: HttpClient){ } getData(){ return this.http.get('https://reqres.in/api/products/2'); } } /* app.component.ts */ import { Component, OnInit } from '@angular/core'; import { TestService } from './test.service'; import { jobDetail } from './data-interface'; import { Observable } from 'rxjs'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent implements OnInit { name = 'Angular'; jobDetail$: Observable<jobDetail>; constructor(private test: TestService){} ngOnInit(){ this.jobDetail$ = this.test.getData(); } }

 <div class="job-post-item p-4 d-block d-lg-flex align-items-center" *ngIf="jobDetail$ | async as jd"> <div class="one-third mb-4 mb-md-0"> <div class="job-post-item-header align-items-center"> <span class="subadge">Partime</span> {{ jd.data.id }} <h2 class="mr-3 text-black"><a href="#"> {{ jd.data.name }} </a></h2> </div> <div class="job-post-item-body d-block d-md-flex"> <div class="mr-3"><span class="icon-layers"></span> <a href="#"> {{ jd.data.color }} </a> </div> <div><span class="icon-my_location"></span> <span> {{ jd.data. pantone_value }} </span> </div> </div> </div> </div>

Format of data received through API is {"data":{"id":2,"name":"fuchsia rose","year":2001,"color":"#C74375","pantone_value":"17-2031"},"ad":{"company":"StatusCode Weekly","url":" http://statuscode.org/ ","text":"A weekly newsletter focusing on software development, infrastructure, the server, performance, and the stack end of things."}}

so, when you logged data as

jobdetails.id, it is obvious that you will get result as undefined

*

Right way is

jobdetails.data.id

Answer 2

You cant use jobdetails.id cause id does not exists in the response. Your service is returning two objects named data and ad , in data object you can find your id , so you can get your id like this: console.log(jobdetails.data.id)