10 MIN BASICS

BASICS +

MOBILE +

BIG DATA +

IONIC HT TP GET JSON

March 20, 2016 Codrova 10minbasics

NOSQL

CLOUD

Search eld: type and press enter

RECENT POSTS
How to set cursor:pointer to html File
Upload input
September 28, 2016
Dierence between IaaS and PaaS
September 21, 2016
Ways to Clear/Fill the Input eld with
Selenium
September 8, 2016
Hacker types (White | Grey | Black hat)
August 24, 2016

In this article we will customize the default generated Ionic app to fetch some
JSON data from the remote API using HTTP GET-request.

Unity Ads experience. Week 1 First

revenue, users motivation
August 14, 2016

TAGS

At rst, you should look again to a previous lesson were we used to learn how

ambari

to generate a default Ionic project from tabs template.When you have it

cordova

apache ink
css

big data

hortonworks

cloud
html

generated we can proceed to perform the customization.

iaas

ionic

mongodb

GET JSON DATA FROM HT TP REQU EST WI TH

IONIC

react.js
spark

java
nosql

redis
sql

map reduce
paas

react-native

saas

selenium

unity3d

unity ads

xml

yarn

There are just 2 les that we need to change:

www/js/controllers.js

25% OFF

www/templates/tab-dash.html

Xiaomi Mi Powerbank
10000 mAh Original Silver
Online lebih lama dengan
powerbank andalan dar

Rp 195.000

Rp 145.000

Lets start from the rst le controllers.js. There is a section for DashCtrl
(Dashboard Controller) with an empty function. This is how it should be

Klik Disini

changed:

.controller('DashCtrl', function($scope, $http) {

$scope.result = "";
$http.get('http://date.jsontest.com/')
.success(function(data, status, headers,config){
console.log('data success');
console.log(data); // for browser console
$scope.result = data; // for UI
})
.error(function(data, status, headers,config){
console.log('data error');
})
.then(function(result){
things = result.data;
});
})

The code above uses $http to send a GET request to API that returns the JSON
for current date and time:

{
"time": "09:53:53 PM",
"milliseconds_since_epoch": 1458510833266,
"date": "03-20-2016"
}

Now, all we need to do is to use the result data on the screen. Open tabdash.html and replace its content with this:

<ion-view view-title="Dashboard">
<ion-content class="padding">
<h2>Ionic GET Json Example</h2>
Current time: {{result.time}}
</ion-content>
</ion-view>

As you can see, we refer to results time eld using Angular expression
language.
Now we need to run this code in browser or on your device.
To run in browser just executethis command in the project directory:

ionic serve localhost

You can see your app by typing http://localhost:8100.

To run on the device (in our case, Android platform):

ionic run android

And here is the result:

Facebook

#ionic

PREVIOUS

Twitter

Google+

Ionic project structure

NEXT

Ionic ng-repeat example

LE AVE A RE P LY
10 Comments on "Ionic HTTP GET Json"

Jointhediscussion

edoardo
Guest

hi, i need to pass arrays from the server to the app.

how should i do?
Thanks
0

aalfiann
Guest

18days14hoursago

ReplyShare

25days17hoursago

awesome, its works for me.. But how if I want to get http json api using
parameter? thanks
0

ReplyShare

10minbasics
Author

ReplyShare

vbcabc

5months4daysago

Hai for me also its giving data error response :( Could you please help me
i am new to ionic and i gt frustrated of searching json
0

ReplyShare

10minbasics
Author

HideReplies

5months4daysago

Hello. What error does it return? Can you see the json data when
you hit http://date.jsontest.com/ in your browser?
0

ReplyShare

juan
Guest

25days17hoursago

Hi. Please, specify which parameter are you talking about.

Path/Form/Header parameter?
0

Guest

HideReplies

5months14daysago

hi i tried this tutorial but the url wont work, although y used another url I
didnt recieved anything
1

ReplyShare

HideReplies

10minbasics

5months13daysago

Hi, Juan. Sorry for a long reply. I have just paste in a browser
http://date.jsontest.com/ and it returned a valid json.
Can you show your code?

Author

ReplyShare

Periyasamy
Guest

5months17daysago

Thank you for the code and explanation.greatvery useful this..

Simple API call in ionic using angularjs
0

ReplyShare

10minbasics
Author

HideReplies

5months13daysago

Hi, Periyasamy. You are always welcome!

0

ReplyShare

Priyanka
Guest

17days22hoursago

same way can you let us know how to show data in ionic in
frontend using Mvc.java as backend(.like simple login and
register)
0

ReplyShare

RECENT POSTS

How to set cursor:pointer to html File Upload input

Dierence between IaaS and PaaS
Ways to Clear/Fill the Input eld with Selenium
Hacker types (White | Grey | Black hat)
Unity Ads experience. Week 1 First revenue, users motivation

2016 10 Min Basics. Back to top