Angular 5 GET data with Observable and HttpClient - Fetching data from Web API

Question

Struggling with the few available Angular 5 Typescript documentation on the new ways of how to implement CRUD methods using Observable with HttpClient, I came up with the next code, but still stuck to show data from a web API:

Here is my model:

export interface Value {
    id: number;
    name: string;
  }

My service:

export class ValueService {
  baseUrl = environment.apiUrl;

  constructor(private authHttp: HttpClient) {}

  getValues() {
    return this.authHttp
      .get<Value[]>(this.baseUrl + 'values', { observe: 'response'});
      // here my baseUrl is 'http://example.com/api/'
  }
}

My component:

@Component({
  selector: 'app-values',
  templateUrl: './values.component.html',
  styleUrls: ['./values.component.css']
})
export class ValuesComponent implements OnInit {

  values: Value[];

  constructor(private valueService: ValueService, private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.data.subscribe(data => {
      this.values = data['values'].result;
    });
  }
}

And finally, my template:

<ul>
  <li>
    <div *ngFor="let value of values | async"> {{value.name}}</div>  
  </li>
</ul>

My data is shown in the browser console with HTTP 200 result, but not on my page, What am I missing to get it rendered on my page?

Answer 1

not sure why you are calling activatedRoute as it is not link to your ValueService. you should call valueService explicitly to get the data.

eg. in your ngOnInit()

this.valueService.getValues().subscribe(response=> {
   // get your data here
});

Also have a look at your ValueService.getValues(). Here is a simple implementation that works in our project. You can map your array later.

return this.http.get(url)
  .map((res: any) => res.json())
  .catch(error => Observable.throw(error.json()));

btw. not sure what is your async filter. what does it do?

Answer 2

Not to sure what you are doing with your ActivateRoute as well, I would suggest separating it from you get data method.

Your getValues() method will return a Observable, which you will subscribe to in the component to store the data into the values array.

You shouldn't need to use the | async in you html ngFor loop unless you are looping through an Observable but in this case you are subscribing to the Observable and storing the Data into an array.

Service:

import { Injectable } from '@angular/core';

@injectable()
export class ValueService {
  baseUrl = environment.apiUrl;

  constructor(private authHttp: HttpClient) {}

  getValues(): Observable<HttpResponse<Value[]>> {
    return this.authHttp
      .get<Value[]>(this.baseUrl + 'values', { observe: 'response'});    
  }
}

Component:

export class ValuesComponent implements OnInit {

  public values: Value[];

  constructor(private valueService: ValueService, private route: ActivatedRoute) { }

  ngOnInit() {
    this.valueService
        .subscribe(
            data => this.values = data['values'].result; // console.log your data to make sure its returning the expected results
            err => console.log(err);
         );
  }
}

HTML:

   <ul>
      <li>
        <div *ngFor="let value of values"> {{value.name}}</div>  
      </li>
    </ul>