Мой API возвращает объект JSON в угловую функцию

Мне нужно получить значение ключа в этом JSON. Если я распечатаю значение непосредственно на консоли, ошибки не возникает.

Мой угловой код .

submit() : void {
    console.log("FORM SUBMITTED")
    console.log(JSON.stringify(this.register.value, undefined, 2));
    this._registerService.register(this.register.value)
    .subscribe(
      data => {
        console.log("DATA : ", JSON.stringify(data, undefined, 2));
        console.log("Status : " + data.status);
        if (data.status == "duplicate") {
          console.log("DUPLICATE");
        } else if (data.status == "success") {
          console.log("SUCCESS");
        }
      },
      error => {
        console.log("ERRORrrr : ", JSON.stringify(error, undefined, 2));
        this._router.navigate(['/500']);
      }
    )
  }

В приведенном выше коде console.log ("DATA:", JSON.stringify (data, undefined, 2)); Работает отлично. Показывает данные: введите описание изображения здесь

Но если я попытаюсь получить значение «статуса» в «данных»,

console.log("Status : " + data.status);

Это дает ошибку:

 error TS2339: Property 'status' does not exist on type 'Object'.

Мне нужно использовать значение status в выражении if .

Пожалуйста, помогите в получении значения data.status

1
Ashish 26 Янв 2020 в 21:21

3 ответа

Лучший ответ

Я заметил, что возвращаемый объект был ассоциативным массивом. Поэтому я смог разобрать ассоциативный массив, например: console.log (data ["status"]);

И я смог преобразовать этот массив в JSON с помощью: let dataJson = JSON.parse (JSON.stringify (data))

После этого преобразования я мог получить доступ к значению ключа JSON с помощью: console.log (dataJson.status);

0
Ashish 31 Янв 2020 в 18:46

Ваш метод .register, похоже, возвращает Observable<object>, поэтому компилятор TS выдает эту ошибку. Возможно, лучше сделать это универсальным методом:

register<T>(body: any) { 
  return this._http.post<T>(
    'localhost:3000/register',
    body,
    { observe: 'body' }
  ).catch(this.handleError); 
}

Который вы можете назвать в вашем компоненте:

this._registerService.register<RegisterData>(this.register.value).subscribe((data) => {
  if (data.status) {
    // this will not throw a compiler error anymore as it will be of type RegisterData
  }
});

С интерфейсом:

export interface RegisterData {
  status: string;
  summary: string;
  details: string;
}
1
Poul Kruijt 27 Янв 2020 в 07:15

Я не знаю, какую версию rxjs вы используете, но в текущей версии вы должны отлавливать ошибки Observables с помощью catchError ().

Это было бы моим решением:

  register(body: any): Observable<{status: string, summary: string, details: string}> {
    return this._http.post(
           'localhost:3000/register', body, 
           {observe: 'body'}).pipe(catchError(this.handleError));
  }

Может быть, это решит вашу проблему.

1
Arthey 27 Янв 2020 в 00:07