在 Angular 中解析来自 Http 请求的 json 响应

Question

I need to parse a json response containing two keys. The response looks like

{
status: 0;
message: 'some error 404'
}

In pure nodejs or React you could just simply do: if (response.status===1)console.log('success') .

However, I've been having a tough time doing this in angular. Could someone guide me and tell me how could I parse the JSON Response? I have attached a mock-up of the code.

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

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

export class CreateEmployeeComponent {
    
    constructor(private http: HttpClient) { };
    
    onFormSubmit() {
        let options = {
            headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded')
        };
        
        let body = new URLSearchParams();
        body.set('data', 'stackoverflow');
            

        this.http.post('http://localhost:8080/createEmployee', body.toString(), options)
        .subscribe(response => {
            console.log(response.status);
            console.log(response.message);
        });
    }
}

Answer 1

According to the documentation , Angular can parse for you objects from string responses if you tell it how to do it. You can use this as an example.

First define an interface inside your component just below your imports:

  export interface Response {
    status: number,
    message: string
  }

This tells angular how to parse the json response from your server. The final bit is to use this interface in your post request like this:

this.http.post<Response>('http://localhost:8080/createEmployee', body.toString(), options)
        .subscribe(response => {
            console.log(response.status);
            console.log(response.message);
        });