Brooks Patola

Parsing Data with Ionic

For a final course project the group I’m apart of  decided to build a real-time event tracking app for the City of Toronto. The scope of the project is rather large and I will limit the nature of this post to my own tasks within the group. Initially we decided we would use Android Studio to build the application as we all have taken a course on the subject and had some familiarity with it (I built a Bike Share Toronto app that displayed all the stations around the city with information pertaining to each station from a JSON feed)…

I felt pretty happy with the result as it was my first look into building an app on any platform (the custom info window was actually the most perplexing and frustrating part surprisingly). Being able to customize the UI and write functionality for the app all within Android Studio was amazing (it just felt so cool!), and definitely one of my favourite courses and learning experiences thus far.

Fast-forward to this final project and we were challenged by our professor to look into Ionic for building our idea as it would be available to all devices and on the web, not solely for Android  users. With no knowledge of what it was, we decided to accept the challenge and to learn and build as we go…

With a “Write Once. Deploy Anywhere” model the Ionic Framework is one to peek into if you haven’t already (it initially launched in 2013 making it still relatively new). It claims to provide the “the best web and native app components for building highly interactive native and progressive web apps”. The stack that Ionic uses consists of Angular, JavaScript, TypeScript, and HTML5. With the plethora of awesome components offered to utilize in building your application only your imagination is the limit.

The first thing I wanted to try and accomplish (after installing all necessary components) was to parse a JSON file that holds a list of event information from the City of Toronto open data set. If you want to follow along, the first thing to do is make sure you properly install the Ionic CLI and Cordova, you also must install a recent version of Node.js. Install instructions can be found here.

lets get to it…

The first thing I’m going to do is create a new Ionic project called “jsonParser” with a blank template…

If we launch this in browser with ionic serve

We will get the following result…

Not much…but it’s a start!

The editor I am using to work on the application is Visual Studio Code which has a nice layout and smooth navigation! Most of our work will be done in the “src” file. Here we can see the code which provides the starting blank page displayed above…

Now onto parsing some JSON!

The first thing we have to do now is to create a provider which can also be referred to as a “service”. This will allow us to to do the “heavy lifting” of fetching data from the City of Toronto server and using it for functionality within our application. There are three main things we must do for this to work which are 1) add a provider for the service we wish to create (fetching JSON data) 2) import it 3) inject it. Lets get to it…

Adding the provider…

We can see the added provider now below the “pages” file in Visual Studio Code…

Now we must write a method that will fetch the event data from the City of Toronto web service …

getJsonData(){
returnthis.http.get(‘http://app.toronto.ca/cc_sr_v1_app/data/edc_eventcal_APR?limit=500’).map(res=>res.json());
}
As you can see above I have also added a couple of imports and injected “Http” into the constructor. http.get is used to pull in the data  from the web and map is used to manipulate that data. Json() is called on the response object to return data.
Now it is time to import HttpProvider in Home.ts…
import {HttpProvider} from ‘../../providers/http/http’;
And add a providers tag in the @Component Decorator…
providers:[HttpProvider]
We will also inject HttpProvider by using an Angular dependancy injection
constructor(public navCtrl: NavController, private httpProvider:HttpProvider)
Time to create a function that will call the getJsonData() method of HttpProvider. We will also need to subscribe to the event using the Ionic Events system that allows you to subscribe to events in one component that have been published in another component…
getdata(){
this.httpProvider.getJsonData().subscribe(
data=> {
console.log(data);
this.eventData=JSON.parse(JSON.stringify(data));
console.log(this.eventData);
},
err=>{
console.error(“Error : “+err);
},
() => {
console.log(‘getData completed’);
}
);
}
The final thing we must do inside Home.ts is call the getdata() method inside of the constructor…
this.getdata();
After this is complete, we must import HttpModule within the app.module.ts file…
This should now provide us with a JSON object to see within our developer console window in browser. I am going to use Google Chrome for the JavaScript Console…
ionic serve –browser “google chrome”
Let’s see what this gives us…
As you can see we were able to retrieve the City of Toronto Events data with a nice array of objects pertaining to each events information. Since we have yet to modify the home.html file it remains the same generic display as when the project was first created. Let’s change that…
Inside of home.html I’m going to change the name of the application to be “Toronto Event Data” which you can edit between the <ion-title></ion-title> tags. The next thing I would like to do is make a nice list-view of the events on the homepage just so we can display the data we have obtained in the JSON object. To do this I’m going to use the Angular ngFor directive in the template to display each event name in the array of objects we have parsed. This is something that I find really cool about using Ionic, in that we can use Angular within the regular HTML and have it function just as any other HTML tag. My finished home.html looks like this…
Time to see the final result…
Pretty sweet! We were able to parse the JSON data from the City of Toronto open data set and display it via list view in Ionic!
During development I ran into an issue called a Cross-origin resource sharing (CORS) error…
To overcome this I simply used a Google Chrome extension which fixed the problem.
Next post I will add on to this by using Google Maps API to display event markers and create a custom info window to display the event information to the user.

Leave a Comment