Subscribing Observable from HTTP request

Question

My Spring Boot controller sends String "hello Angular" as a simple response to http request.

@Controller
@RequestMapping(path = "/u")
public class UController {
    @RequestMapping("/greet")
        public  @ResponseBody  String greet() {
            System.out.println("you are in the method greet() ");
            return "hello Angular";
    }
}

I see at console (System.out) that Angular has requested right method and the response should have been sent to client.

I would like to print this message by Angular on the web site, so I subscribe the Observable from http client, but it does not appear on the screen.

Here is my Angular component:

import { Component, OnInit } from '@angular/core';
import { HttpClientModule }    from '@angular/common/http';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Component({
  selector: 'app-root',
  template: `
    <div style="text-align:center">
      <h1> {{greeting}} </h1>
      </div>
    <router-outlet></router-outlet>
  `,
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit{

    greeting : string;

    constructor(private http: HttpClient){  }

    ngOnInit() {
        this.http.get<string>('http://localhost:8080/u/greet').subscribe(data => { this.greeting = data; });
    }
}

I really have no idea how can I fix it.

If you add a console.log(data) inside the body of subscribe(), what gets logged? Also, do you see the request execute in the network tab of your browser's developer tools? — Alexander Staroselsky
I got an error: SyntaxError: "JSON.parse: unexpected character at line 1 column 1 of the JSON data" — pobu
But i don't have any idea what could have gone wrong. It's just a simple text message — pobu

Alexander Staroselsky Alexander Staroselsky · Accepted Answer · 2019-02-20T19:14:01

The error is happening because HttpClient assumes content to be valid JSON, not a simple string. It effectively attempts to parse JSON internally. If you try to do JSON.parse("hello Angular"), it will show the exact same error:

JSON.parse("hello Angular");

To retrieve non-JSON content, you can do the following by specifying the response type to be text as well as removing the generic typing of <string>:

this.http.get('http://localhost:8080/u/greet', {responseType: 'text'})
  .subscribe(data => { this.greeting = data; });

Otherwise, for any actual JSON (application/json) data being returned from the server, you do not need to provide responseType and can/should use the generic typing mechanism.

Hopefully that helps!

Subscribing Observable from HTTP request

1 Answers