How to Parse a Json Data Response from an API call on Ionic as Below

Question

I made an api call and get a response as below, shown on console

My Api Provider:

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(data) shows

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

console.log(data)

I need to parse the json data on 'details: Object'

I tried console.log(data.details) got error:

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

UPDATE

I was trying to use map operator as below

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

Got another error: property json does not exist on type 'Object'

Please let me know how to make it work on ionic 3.

Regards

console.log SS

Unable to get property 'details' of undefined or null reference — Elo
– Elo, Commented Dec 22, 2017 at 3:33

Elo · Accepted Answer · 2017-12-23 05:29:40Z

4

I manage to go through the 'details' with

data['details'];

and 'item'

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

Thanks for all the suggestions.

answered Dec 23, 2017 at 5:29

Elo

1332 silver badges13 bronze badges

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

Comments

Lucia P. · Accepted Answer · 2018-03-25 22:35:43Z

0

Why don't you try like this:

Import the toPromise operator:

import 'rxjs/add/operator/toPromise';

Then turn your observable into a promise with it's help. No need to map the response to Json as you use the new Angular HttpClient, it is mapped by default.

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

This way the code is so much cleaner. It is tested and works. If it doesn't then you should check your apiUrl.

Edited

The reason you receive the error property 'details' does not exist on type 'Object' is because you need to give a type to the data object you receive (other than the default Object). I updated the example with this:

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

This is so much better than the ugly square brackets in data['details'] :).

edited Mar 25, 2018 at 22:35

answered Dec 22, 2017 at 15:18

Lucia P.

2093 silver badges6 bronze badges

1 Comment

Elo Over a year ago

yes the code works. it returns json object as the pictured attached above. the problem is how to parse the nested json objects or arrays inside 'details'? i tried console.log(data.details). it returns error: property 'details' does not exist on type 'Object'

Collectives™ on Stack Overflow

How to Parse a Json Data Response from an API call on Ionic as Below

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related