Data not shown on UI despite Http Service getting Called

Question

Call doesnt work due to upgrades in RXjs version 6 is incorporated in angular version8. for complete source code see:- https://github.com/ankit01122/CRUDApp

import { Component } from '@angular/core';
import {ServicexampleService} from './servicexample.service';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'CRUDApp';
  heroes: object;

  constructor(private serviceExample: ServicexampleService) {
    this.heroes = serviceExample.returnABC();
  }
  getHeroes(): void {
    this.heroes = this.serviceExample.returnABC();
  }
}

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

@Injectable({
  providedIn: 'root'
})
export class ServicexampleService {
  private httpClient: HttpClient;
  private abc: Observable<object>;

  constructor( httpClient: HttpClient ) {
    this.abc =  httpClient.get('https://jsonplaceholder.typicode.com/todos/1');
      }

 public returnABC = (): Observable<object> => this.abc;
}

Service should get executed and get data on http://localhost:4200/

@xdecdec :- No Data is displayed on screen.We can't post images here otherwise had shown to you. — Ankit, Aug 01 '19 at 10:26
closign this task as resolved. {heroes | json} solved this task. — Ankit, Aug 02 '19 at 08:29

score 2 · Accepted Answer · answered Aug 01 '19 at 08:04

2

You have to subscribe to your observable or it wont work.

this.serviceExample.returnABC().subscribe(
    data => {
        this.heroes = data;
    }
)
;

answered Aug 01 '19 at 08:04

Sam

1,736
8
15

Its better to use the async pipe in template. – Braincompiler Aug 01 '19 at 08:06
changes done as shown in https://github.com/ankit01122/CRUDApp/blob/master/src/app/app.component.ts service is also getting called but data not populating. – Ankit Aug 01 '19 at 10:08
You are still assigning this.heroes to the observable. You don't need to do this as you are now subscribing to the result and assigning the data returned to this.heroes. – Sam Aug 01 '19 at 10:11
still same result...updated file please see https://github.com/ankit01122/CRUDApp/blob/master/src/app/app.component.ts – Ankit Aug 01 '19 at 10:21
Are you calling getHeroes() after, because you may be overwriting the heroes variable? Also i would remove your service call from the constructor and put it in ngOnInit. This is the suggested practice in the angular docs. – Sam Aug 01 '19 at 10:30
i even moved the calling code to ngOnInit but with no success. – Ankit Aug 01 '19 at 10:32
https://imgur.com/mUSzdoH – Ankit Aug 01 '19 at 10:39
can you fork this small project and run on your local ? – Ankit Aug 01 '19 at 10:41

score 0 · Answer 2 · answered Aug 01 '19 at 08:12

Observables are lazy and they will not execute unless you ask them to. You can do it in two ways. One is to subscribe as in Sam's reply.

Or use async pipe to do the job for you. Async pipe will automatically unsubscribe while when you do subscribe you should take care of the un-subscribe part yourself. http://reactivex.io/rxjs/manual/overview.html#observable

score 0 · Answer 3 · answered Aug 01 '19 at 08:17

It is better not to call http in constructor.

Instead it is a better practice to inject http in your constructor and then make the request inside your method. Every httpClient call returns an Observable so in order to retrieve the response you have to subscribe to it.

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

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

  constructor(private httpClient: HttpClient ) {

   }

 public returnABC(): Observable<any> {
     return this.http.get<any>('https://jsonplaceholder.typicode.com/todos/1);
 }
}



import { Component } from '@angular/core';
import {ServicexampleService} from './servicexample.service';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'CRUDApp';
  heroes: object;

  constructor(private serviceExample: ServicexampleService) {

  }

  ngOnInit() {
      // in case you want to get heroes on init
      this.getHeroes()
  }
  getHeroes(): void {
    this.serviceExample.returnABC().subscribe(response => {
            this.heroes = response;
        });
  }
}

Data not shown on UI despite Http Service getting Called

3 Answers3