Блог

Главная - Вопросы по программированию - Анализ ответа json из Http-запроса в Angular

Анализ ответа json из Http-запроса в Angular

#json #angular

#json #angular

Вопрос:

Мне нужно проанализировать ответ json, содержащий два ключа. Ответ выглядит так

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

В чистом nodejs или React вы могли бы просто сделать: if (response.status===1)console.log('success') .

Тем не менее, мне было трудно делать это в angular. Может ли кто-нибудь помочь мне и сказать, как я могу проанализировать ответ JSON? Я приложил макет кода.

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

Комментарии:

1. В чем именно здесь проблема? Вы не можете получить доступ к свойствам? Каков вывод console.log инструкций?

2. Ошибка заключалась в том, что свойство ‘status’ не существует для типа ‘Object’. Я неправильно реализовал интерфейс. Автор с принятым ответом смог решить эту проблему. В любом случае, спасибо.

Ответ №1:

Согласно документации, Angular может анализировать для вас объекты из строковых ответов, если вы укажете ему, как это сделать. Вы можете использовать это в качестве примера.

Сначала определите интерфейс внутри вашего компонента чуть ниже вашего импорта:

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

Это сообщает angular, как проанализировать ответ json с вашего сервера. Последний бит — использовать этот интерфейс в вашем post-запросе следующим образом:

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