Loading Remote JSON Data with HTTP in Ionic

What people said

Recommends rawturtle · 2017-05 · Stack Overflow · on “Parse JSON with Ionic 2 and typescript”

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(" [LINK] ").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: [this video]

Cites OshoParth · 2017-06 · Stack Overflow · on “Ionic app shows not http provider error”

I am trying to implement a http request in ionic framework 3.1 application. I have created a provider named apidata using ionic g provider apidata command after which i created the following function in it that calls the api and logs the data returned by it on console. getremotedata(){ console.log(this.http.get(' [LINK] ')); } and have also imported the http package in the header as import { Http } from '@angular/http'; after which I updated the app.module.ts file to import the provider as import { ApidataProvider } from '../providers/apidata/apidata'; and also added the same to the provider list as providers: [ StatusBar, SplashScreen, {provide: ErrorHandler, useClass: IonicErrorHandler}, A

Cites hertanet · 2017-07 · Stack Overflow · on “How to display json data in ionic 3”

I'm new to ionic 3 and I would like to get a JSON with my data in my ionic 3 so I was trying to follow this tutorial: [this video] Project ionic-info: [LINK] But I see no data in my console: [LINK] My project inside editor: [LINK] and here : package.json { "name": "ts-test", "version": "0.0.1", "author": "Ionic Framework", "homepage": " [LINK] ", "private": true, "scripts": { "clean": "ionic-app-scripts clean", "build": "ionic-app-scripts build", "lint": "ionic-app-scripts lint", "ionic:build": "ionic-app-scripts build", "ionic:serve": "ionic-app-scripts serve" }, "dependencies": { "@angular/common": "4.1.3", "@angular/compiler": "4.1.3", "@angular/compiler-cli": "4.1.3", "@angular/core": "4.1.3"

Cites Ryley38 · 2017-11 · Stack Overflow · on “get data from local Json file ionic 3”

I start a dummy project in Ionic. I try to get data from a local Json file but I have this error : [LINK] I don't understand why there is no provider for HttpClient. For further details, I actually tried to follow this tutorial : [this video] How can I fix this error and get the data ? Versions Ionic 3.18.0 Angular 5.0.1 app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { ErrorHandler, NgModule } from '@angular/core'; import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular'; import { SplashScreen } from '@ionic-native/splash-screen'; import { StatusBar } from '@ionic-native/status-bar'; import { MyApp } from './app.component'; import { HomePage } from

Cites Adam · 2017-11 · Stack Overflow · on “Display JSON data with Ionic 2/AngluarJS?”

I'm fetching API data using AngularJS/Ionic 2. I've followed this [this video] guide and get it to properly log the data when I go to home.html. But when I try to actually display the data in home.html I can't get it to work. data-provider.ts: getRemoteData(){ this.http.get(' [LINK] ').map(res => res.json()).subscribe(data => { console.log(data); }); } home.ts: ionViewDidLoad(){ this.dataService.getRemoteData(); } This correctly logs JSON data: [ { "id": "a", "name": "ExampleA", "price": "10" }, { "id": "b", "name": "ExampleB", "price": "15" } ] I've tried returning the data instead of logging the data, then creating a variable data: any; in the home.ts and outputting the data in home.html as <p>