Parse JSON with Ionic 2 and typescript

Question

I'm trying to parse some JSON data from randomuser.me api, to do that a found some tutorials online but aparrently something have change recently in Ionic 2, because none of them are working.

Here is what i have:

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {Http} from '@angular/http';


@Component({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  items : any;
  //http://api.randomuser.me/?results=10

  constructor(private navController: NavController, private http: Http) {

    this.http.get("http://api.randomuser.me/?results=10").subscribe(data => {
        console.log("Got data");
        this.items=JSON.parse(data._body).results; // this is the error
        console.log(this.items);
    });
  }

  itemClicked(event, item) {
    console.log(item.title);
    //console.log(event);
  }


}

In the terminal i can see the error: data._body - Property '_body' is private and only accessible within class 'Response'.

What can i do?

basarat · Accepted Answer · 2016-07-08 01:02:26Z

6

data._body for data.text(),

Instead of data.text() then parsing it you should use data.json()

this.items = data.json();

https://angular.io/docs/ts/latest/guide/server-communication.html#!#extract-data

answered Jul 8, 2016 at 1:02

basarat

278k60 gold badges475 silver badges528 bronze badges

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

Comments

Adem Ergun · Accepted Answer · 2016-09-13 17:09:51Z

4

It has changed in the new versions try this

this.items= JSON.parse(data['_body']).results;

answered Sep 13, 2016 at 17:09

Adem Ergun

791 silver badge6 bronze badges

Comments

Raidri · Accepted Answer · 2017-05-24 09:08:54Z

1

Because Ionic 2 has changed a wee bit I thought I'd share the way I do it.

To access a map function we need to add this line under your import statements

import 'rxjs/add/operator/map';

then change your constructor to...

        this.http.get("http://api.randomuser.me/?results=10").map(res => res.json()).subscribe(data => {
        console.log("Got data");
        console.log(this.data);
    });
}

Now we can see a JSON string in the console.
Note the only extra bit we added is .map(res => res.json()

There is a guy Joshua Morony who does a lot of Ionic 2 videos that you should check out if you are struggling with getting data from an API: https://www.youtube.com/watch?v=vuc4dp0qHSc&index=33&list=PLvLBrJpVwC7ocO1r-xu218C15iE9gTWBA

edited May 24, 2017 at 9:08

Raidri

17.7k11 gold badges69 silver badges70 bronze badges

answered May 24, 2017 at 8:46

rawturtle

791 silver badge8 bronze badges

2 Comments

Yokesh Varadhan Over a year ago

how could i show the values to html like {{data.something}}

Jack Nutkins Over a year ago

This here is the answer as of 15/09/2017. Thanks a lot @rawturtle.

Collectives™ on Stack Overflow

Parse JSON with Ionic 2 and typescript

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related