Angular 6 through json and get data based on id

Question

ERROR

ServiceDetailComponent.html:3 ERROR TypeError: Cannot read property 'serviceName' of undefined; at Object.eval [as updateRenderer] (ServiceDetailComponent.html:3); at Object.debugUpdateRenderer [as updateRenderer] (core.js:11080); at checkAndUpdateView (core.js:10456); at callViewAction (core.js:10692); at execComponentViewsAction (core.js:10634); at checkAndUpdateView (core.js:10457); at callViewAction (core.js:10692); at execEmbeddedViewsAction (core.js:10655); at checkAndUpdateView (core.js:10452); at callViewAction (core.js:10692);

Service :

import { IServices } from './../../services';
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ServiceService {

  // private _url: string = 'https://api.myjson.com/bins/1d8suw';
  private _url: string = 'https://api.myjson.com/bins/1azcrc';


  constructor(private http: HttpClient) { }

  getServices(): Observable<IServices[]> {
    return this.http.get<IServices[]>(this._url);
  }


  getService(id: number) {
    return this.http.get<IServices[]>(this._url + id );
  }

}

Component

import { Component, OnInit } from '@angular/core';
import { ServiceService } from '../services/service.service';
import { ActivatedRoute, Router } from '@angular/router';
import { IServices } from 'src/app/services';

@Component({
  selector: 'app-service-detail',
  templateUrl: './service-detail.component.html',
  styleUrls: ['./service-detail.component.css']
})
export class ServiceDetailComponent implements OnInit {
  id: number;
  service: IServices[];
  constructor(private serviceService: ServiceService,
    private route: ActivatedRoute
    ) { }

  ngOnInit() {
    this.id = this.route.snapshot.params['id'];

    this.serviceService.getService(this.id)
      .subscribe(service => {
          this.service = service;
      });

  }

}

HTML Result

<p>
  service-detail works!
</p>

{{ service.serviceName }}

To give you a great answer, it might help us if you have a glance at How to Ask if you haven't already. It might be also useful if you could provide a minimal reproducible example. — Mat
service.serviceName might only work after the ajax request in your service has completed. Before that, that's 100% sure its undefined — ValLeNain

codeepic codeepic · Accepted Answer · 2018-10-15T10:59:15

Your naming is all over the place. service: IService[] --> you are expecting a list of services, so make it services: IService[].
this.services property will be undefined until you get the response back from server. If you want to use it in the template, you should use elvis operator - which is a fancy name for ? and looks like this: service?.serviceName . This in essence tells Angular not to throw an error if service is undefined and rerender the value once it becomes available.
Since this.services is an array, you need to loop over the items using *ngFor structural directive:

<p *ngFor="let service of services"> {{service.serviceName}} </p>

As you can see - I am not using elvis operator here since *ngFor won't render anything unless services value is initialized.

Angular 6 through json and get data based on id

3 Answers