Use observable to get the HTTP response

Question

import { Component, OnInit } from '@angular/core';
import { Observable } from "rxjs/Observable";
import { HttpClient } from "@angular/common/http";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit{

  formData = {
    first_name:"",
    last_name:"",
    middle_name:"",
    mobile_number:"",
    email_address:"",
    password:"",
    confirm_password:""
  };  

  constructor(private httpClient:HttpClient) {

  }

  ngOnInit() {
    console.log(this.httpClient.get("http://localhost:8000"));
    // how to use this returned Observable to get the actual response.
  }

  submittedDetails(){
      console.log('FirstName: ' + this.formData.first_name);
      console.log('LastName: ' + this.formData.last_name);
      console.log('MiddleName: ' + this.formData.middle_name);
      console.log('Email Address: ' + this.formData.email_address);
      console.log('MobileNumber: ' + this.formData.mobile_number);
      console.log('Password: ' + this.formData.password);
      console.log('Confirm Password: ' + this.formData.confirm_password);   
  }
}

I am playing around with the above code to get the HTTP response. Right now, I am learning Angular. The reason to make a HTTP call on ngInit() is purely for learning purpose.
I am using Angular 6.

Difficulty/Issue:

I able to make a request to my back end code and code inside ngInit() returns me an Observable. Now, how to use this to see the actual response received?

Let's assume Content-type of response could be anything for now. I apologize if I have understood anything wrong(in Angular context) here.

you need to sucbscribe to it in order to get the result `this.httpClient.get("http://localhost:8000").subscribe(res => {console.log(res)});` — SlimenTN, Sep 12 '18 at 09:59
Possible duplicate of [How do I return the response from an Observable/http/async call in angular2?](https://stackoverflow.com/questions/43055706/how-do-i-return-the-response-from-an-observable-http-async-call-in-angular2) — David, Sep 12 '18 at 10:04
@David Kinda duplicate but the OP there is dealing with `async` and `sync` scenarios. Here, I am just trying to get response from a simple HTTP request. — nice_dev, Sep 12 '18 at 10:21
I am not sure who down voted. I agree that I need to search more, but sometimes getting the right result also depends on search keywords we put. I was helpless as I didn't reach the right destination. — nice_dev, Sep 12 '18 at 10:23

score 2 · Accepted Answer · answered Sep 12 '18 at 10:02

2

You must subscribe to observable:

this.httpClient.get("http://localhost:8000").subscribe(data => {
   console.log(data);
});

Note that by default httpClient expects to receive JSON and parses that for you. If your reply returns something else, you should modify the request.

answered Sep 12 '18 at 10:02

PeS

3,757
3
40
51

You are correct. It expects `JSON` as a response by default. Is there way we can set custom `accept-type` ? – nice_dev Sep 12 '18 at 10:25
Frankly, I am not doing that often therefore I don't remember how. But you can [take a look here](https://angular.io/guide/http) – PeS Sep 13 '18 at 09:29

score 1 · Answer 2 · answered Sep 12 '18 at 10:03

1

If you want to trigger the request in your component/service you have to subscribe to it.

 this.httpClient.get("http://localhost:8000").subscribe(response => {
           // do some action
        });

answered Sep 12 '18 at 10:03

Saso

148
10

should we unsubscribe http calls? – vsam May 12 '23 at 13:14
1

usually we subscribe in the store/component level and we unsubscribe by .pipe(takeUntil(this.destroy$)).subscribe.... and previously we declare private destroy$ = new Subject(); – Saso May 12 '23 at 19:27

Use observable to get the HTTP response

2 Answers2