Parsing json response from Http Request in Angular

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);
        });
    }
}

What exactly is the issue here? Are you not able to access the properties? What is the output of the console.log statements? — Barremian
– Barremian, Commented Nov 23, 2020 at 10:01
The error was property 'status' does not exist on type 'Object'. I was implementing the interface incorrectly. The author with the accepted answer was able to solve it. Thanks anyway. — Catalyst
– Catalyst, Commented Nov 23, 2020 at 10:10

Dharman · Accepted Answer · 2020-11-23 10:08:28Z

5

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);
        });

edited Nov 23, 2020 at 10:08

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Nov 23, 2020 at 10:03

dopesky

2009 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Parsing json response from Http Request in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related