Question

我做了一个api调用并得到如下所示的响应，显示在控制台上

我的Api提供者：

import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';

@Injectable()
export class RestapiProvider {

apiUrl = 'http://example.com/api/GetItemByCategory?cat_id=1&merchant_id=1&json=true';

  constructor(public http: HttpClient) {
    //console.log('Hello RestapiProvider Provider');
  }

getItembyCategory() {
     return new Promise(resolve => {
        this.http.get(this.apiUrl).subscribe(data => {
      resolve(data);
      console.log(data);
    }, err => {
        console.log(err);
      });
    });
}

Console.log（数据）显示

[object Object]: {code: 1, details: Object, msg: "success..", request: "{"cat_id":"1","merchant_id":"1","json":"true"}"}

console.log(data)

我需要解析＆＃39; details: Object ＆＃39;

上的json数据

我尝试了 console.log(data.details) 得到错误：

Unable to get property 'details' of undefined or null reference

更新

我试图使用map运算符，如下所示

this.http.get(this.apiUrl).map(data => data.json()).subscribe(data => {
  resolve(data);
  console.log(data);
}

又出现了一个错误：property json does not exist on type 'Object'

请让我知道如何使它在离子3上起作用。

此致

console.log SS

Answer 1

我设法完成了细节＆＃39;与

data['details'];

和＆＃39; item＆＃39;

data['details']['item'];

感谢所有建议。

Answer 2

你为什么不尝试这样：

导入toPromise运算符：

import 'rxjs/add/operator/toPromise';

然后在你的帮助下将你的观察变成一个承诺。当您使用新的Angular HttpClient时，无需将响应映射到Json，默认情况下会映射它。

getItembyCategory() {
 return this.http.get(this.apiUrl)
  .toPromise()
  .then((data: any) => {
     console.log('Success', data.details);
     return data;
  })
  .catch(err => {
     console.log('Error', err);
     return err;
  })
}

这样代码就更清晰了。它经过测试和运作。如果没有，那么你应该检查你的apiUrl。

<强>被修改

您收到错误property 'details' does not exist on type 'Object'的原因是您需要为收到的数据对象提供类型（默认Object除外）。我用这个更新了这个例子：

(data: any) => {
  console.log(data.details);
  return data;
}

这比data['details'] :)中的丑方括号要好得多。

如何从Ionic上的API调用解析Json数据响应，如下所示

2 个答案: