CODEWITHSUNDEEP
angular
shubham singh
shubham singh

Reputation: 19

Getting undefined using Async in angular 8

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;
}

Upvotes: 1

Views: 138

Answers (2)

B-saal Giri
B-saal Giri

Reputation: 86

/* 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

Upvotes: 1

Aymen TAGHLISSIA
Aymen TAGHLISSIA

Reputation: 1925

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)

Upvotes: 0

Related Questions