{"id":906,"date":"2016-04-20T15:36:07","date_gmt":"2016-04-20T15:36:07","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=906"},"modified":"2023-07-18T11:48:18","modified_gmt":"2023-07-18T15:48:18","slug":"10-minutes-with-ionic-2-calling-an-api","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-calling-an-api","title":{"rendered":"10 Minutes with Ionic 2: Calling an API"},"content":{"rendered":"

2020 Update: Building Ionic 1, 2, or 3 apps? We recommend Ionic 4 and above – learn how to migrate<\/a>. For an updated way to make API calls natively, see the Capacitor Community HTTP plugin<\/a>.<\/p><\/blockquote>\n

Getting up and running with Ionic 2 using the Ionic CLI is super simple for anyone with web development experience. In our first two articles 10 Minutes with Ionic 2: Hello World<\/a> and 10 Minutes with Ionic 2: Adding Pages and Navigation<\/a>, we looked at the basics of creating an Ionic app. In this article, we’ll build on what we learned and look at calling backend APIs using a class.
\n<\/p>\n

Ionic Start<\/h3>\n

We’ll start by creating an app with the blank template, using ionic start<\/code>.<\/p>\n

ionic start apiApp blank --v2 --ts\n<\/code><\/pre>\n
As described in the first post of this series, we now have some basic plumbing, including a home<\/code> page.<\/p>\n
\"Default
Creating a New Provider<\/h3>\n
Let’s look at adding a new provider (also known as a service), which will be used to make an HTTP request to an API. Similar to the last post, where we created a page, the CLI makes this significantly easier by providing automatic provider generation, using ionic g<\/code>. After changing into the project directory (cd apiApp<\/code>), let’s create a new provider called PeopleService<\/code>, using the CLI.<\/p>\n
ionic g provider PeopleService\n<\/code><\/pre>\n
The CLI will generate the an @Injectable<\/code> class called PeopleService<\/code> in app\/providers\/people-service\/people-service.ts<\/code>.<\/p>\n
\"New
This class will have the basic boilerplate code inside of a load<\/code> method to make an HTTP request.<\/p>\n
load() {\n  if (this.data) {\n    \/\/ already loaded data\n    return Promise.resolve(this.data);\n  }\n\n  \/\/ don't have the data yet\n  return new Promise(resolve => {\n    \/\/ We're using Angular HTTP provider to request the data,\n    \/\/ then on the response, it'll map the JSON data to a parsed JS object.\n    \/\/ Next, we process the data and resolve the promise with the new data.\n    this.http.get('path\/to\/data.json')\n      .map(res => res.json())\n      .subscribe(data => {\n        \/\/ we've got back the raw data, now generate the core schedule data\n        \/\/ and save the data for later reference\n        this.data = data;\n        resolve(this.data);\n      });\n  });\n}\n<\/code><\/pre>\n
Random User API<\/h3>\n
The Random User Generator<\/a> is a free API that generates data of fake users, including names, emails, pictures, etc. It is a very helpful API for doing mockups and learning. Making an HTTP request to https:\/\/randomuser.me\/api\/<\/code> will return a JSON response similar to the following:<\/p>\n
{\n  "results":[\n    {\n      "gender":"male",\n      "name":{\n        "title":"mr",\n        "first":"eugene",\n        "last":"jordan"\n      },\n      "location":{\n        "street":"3277 green rd",\n        "city":"australian capital territory",\n        "state":"queensland",\n        "postcode":275\n      },\n      "email":"eugene.jordan@example.com",\n      "login":{\n        "username":"beautifulbutterfly703",\n        "password":"redhot",\n        "salt":"tva1i6Oo",\n        "md5":"a4231f30aa1fcfe46e4c7c4537a4bf11",\n        "sha1":"d6051a921eba285bbeccd95388332f92a50047ce",\n        "sha256":"093b0e1b429a105902f91e4be28c9dc12629701924312d63d55cdfd556d54c38"\n      },\n      "registered":1000882268,\n      "dob":537587321,\n      "phone":"02-4894-6208",\n      "cell":"0477-498-405",\n      "id":{\n        "name":"TFN",\n        "value":"571061435"\n      },\n      "picture":{\n        "large":"https:\/\/randomuser.me\/api\/portraits\/men\/12.jpg",\n        "medium":"https:\/\/randomuser.me\/api\/portraits\/med\/men\/12.jpg",\n        "thumbnail":"https:\/\/randomuser.me\/api\/portraits\/thumb\/men\/12.jpg"\n      },\n      "nat":"AU"\n    }\n  ],\n  "info":{\n    "seed":"8eb0b2c2e327a185",\n    "results":1,\n    "page":1,\n    "version":"1.0"\n  }\n}\n<\/code><\/pre>\n
If we modify our request to https:\/\/randomuser.me\/api\/?results=10<\/code>, the results<\/code> array in the response will contain ten users. Let’s put this in our PeopleService<\/code>. We will need to make a couple of changes to the code the provider gave us. First, let’s put in the URL:<\/p>\n
this.http.get('https:\/\/randomuser.me\/api\/?results=10')\n<\/code><\/pre>\n
Currently, our code stores\/returns the whole response. However, we only want to return the results<\/code> array in the response. We’ll modify the .subscribe<\/code> method:<\/p>\n
.subscribe(data => {\n  this.data = data.results;\n  resolve(this.data);\n});\n<\/code><\/pre>\n
Now, our method, when called, will return a promise, which will resolve with an array of users when we get a response back from the API.<\/p>\n
Calling PeopleService<\/h3>\n
Let’s take a look at calling our PeopleService and outputting the results as a list on our home page. First, inside app\/pages\/home\/home.ts<\/code>, we need to import our service:<\/p>\n
import {PeopleService} from '..\/..\/providers\/people-service\/people-service';\n<\/code><\/pre>\n
Next, in our @Page<\/code> decorator, we will need to add our service as a provider.<\/p>\n
@Page({\n  templateUrl: 'build\/pages\/home\/home.html',\n  providers: [PeopleService]\n})\nexport class HomePage {\n<\/code><\/pre>\n
Now, we can add a constructor to our page, create a people<\/code> property, import the PeopleService, and assign the PeopleService<\/code> to a property of the class.<\/p>\n
export class HomePage {\n  public people: any;\n\n  constructor(public peopleService: PeopleService){\n\n  }\n}\n<\/code><\/pre>\n
Let’s add a method to our HomePage<\/code> class called loadPeople<\/code> that will call our peopleService.load<\/code> method and assign the result of the promise in a people<\/code> property of the class.<\/p>\n
loadPeople(){\n  this.peopleService.load()\n  .then(data => {\n    this.people = data;\n  });\n}\n<\/code><\/pre>\n
Finally, we will call this method from our constructor.<\/p>\n
export class HomePage {\n  public people: any;\n\n  constructor(public peopleService: PeopleService){\n    this.loadPeople();\n  }\n\n  loadPeople(){\n    this.peopleService.load()\n    .then(data => {\n      this.people = data;\n    });\n  }\n}\n<\/code><\/pre>\n
Now that our class is getting the data, let’s modify our template for this page (app\/pages\/home.html<\/code>) to list out users with their picture, first name, last name, and email. We’ll accomplish this by looping through our people<\/code> array property using ngFor<\/code>.<\/p>\n
<ion-navbar *navbar>\n  <ion-title>\n    Home\n  <\/ion-title>\n<\/ion-navbar>\n\n<ion-content class="home">\n  <ion-list>\n    <ion-item *ngFor="#person of people">\n      <ion-avatar item-left>\n        <img src="{{person.picture.thumbnail}}">\n      <\/ion-avatar>\n      <h2>{{person.name.first}} {{person.name.last}}<\/h2>\n      <p>{{person.email}}<\/p>\n    <\/ion-item>\n  <\/ion-list>\n<\/ion-content>\n<\/code><\/pre>\n
Serve<\/h3>\n
Finally, in the CLI, we’ll run ionic serve<\/code> to view our app in the browser:<\/p>\n
ionic serve\n<\/code><\/pre>\n
You should end up with something similar to the following in your browser:<\/p>\n
\"Screenshot
Conclusion<\/h3>\n
In under ten minutes, using the power of the Ionic CLI and some simple code, we have created an app that interacts with a backend API. This functionality is needed to create most apps, and this ability to get it working quickly will help you greatly on your journey toward creating the next #1 app in the app stores!<\/p>\n","protected":false},"excerpt":{"rendered":"
2020 Update: Building Ionic 1, 2, or 3 apps? We recommend Ionic 4 and above – learn how to migrate. For an updated way to make API calls natively, see the Capacitor Community HTTP plugin. Getting up and running with Ionic 2 using the Ionic CLI is super simple for anyone with web development experience. […]<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"0","publish_post_category":"23","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[124],"tags":[3,13,25],"class_list":["post-906","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-ionic","tag-ionic-2","tag-tutorials"],"acf":[],"yoast_head":"\n10 Minutes with Ionic 2: Calling an API - Ionic Blog<\/title>\n<meta name=\"description\" content=\"In this article, we\u2019ll build on what we learned in previous articles and look at calling backend APIs using a class.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-calling-an-api\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"10 Minutes with Ionic 2: Calling an API\" \/>\n<meta property=\"og:description\" content=\"In this article, we\u2019ll build on what we learned in previous articles and look at calling backend APIs using a class.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-calling-an-api\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2016-04-20T15:36:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-18T15:48:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/files-ts.png\" \/>\n<meta name=\"author\" content=\"Andrew McGivery\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@andrewmcgivery\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andrew McGivery\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-calling-an-api#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-calling-an-api\"},\"author\":{\"name\":\"Andrew McGivery\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/f919a9d571424a39c0ec8ce6d44755e7\"},\"headline\":\"10 Minutes with Ionic 2: Calling an API\",\"datePublished\":\"2016-04-20T15:36:07+00:00\",\"dateModified\":\"2023-07-18T15:48:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-calling-an-api\"},\"wordCount\":599,\"commentCount\":92,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-calling-an-api#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/files-ts.png\",\"keywords\":[\"Ionic\",\"Ionic 2\",\"Tutorials\"],\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-calling-an-api#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-calling-an-api\",\"url\":\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-calling-an-api\",\"name\":\"10 Minutes with Ionic 2: Calling an API - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-calling-an-api#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-calling-an-api#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/files-ts.png\",\"datePublished\":\"2016-04-20T15:36:07+00:00\",\"dateModified\":\"2023-07-18T15:48:18+00:00\",\"description\":\"In this article, we\u2019ll build on what we learned in previous articles and look at calling backend APIs using a class.\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-calling-an-api#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-calling-an-api\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-calling-an-api#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/files-ts.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/files-ts.png\",\"width\":196,\"height\":134},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-calling-an-api#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"10 Minutes with Ionic 2: Calling an API\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/f919a9d571424a39c0ec8ce6d44755e7\",\"name\":\"Andrew McGivery\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/30cc07af4f34ecef53282a28baa6b213feb275e5abbd28b62d197851aff4ca7e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/30cc07af4f34ecef53282a28baa6b213feb275e5abbd28b62d197851aff4ca7e?s=96&d=mm&r=g\",\"caption\":\"Andrew McGivery\"},\"description\":\"My name is Andrew McGivery. I currently work full time as an application developer at Manulife Financial in Canada.\",\"sameAs\":[\"http:\/\/www.mcgivery.com\/\",\"https:\/\/x.com\/andrewmcgivery\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/andrewmcgivery\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"10 Minutes with Ionic 2: Calling an API - Ionic Blog","description":"In this article, we\u2019ll build on what we learned in previous articles and look at calling backend APIs using a class.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-calling-an-api","og_locale":"en_US","og_type":"article","og_title":"10 Minutes with Ionic 2: Calling an API","og_description":"In this article, we\u2019ll build on what we learned in previous articles and look at calling backend APIs using a class.","og_url":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-calling-an-api","og_site_name":"Ionic Blog","article_published_time":"2016-04-20T15:36:07+00:00","article_modified_time":"2023-07-18T15:48:18+00:00","og_image":[{"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/files-ts.png"}],"author":"Andrew McGivery","twitter_card":"summary_large_image","twitter_creator":"@andrewmcgivery","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Andrew McGivery","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-calling-an-api#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-calling-an-api"},"author":{"name":"Andrew McGivery","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/f919a9d571424a39c0ec8ce6d44755e7"},"headline":"10 Minutes with Ionic 2: Calling an API","datePublished":"2016-04-20T15:36:07+00:00","dateModified":"2023-07-18T15:48:18+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-calling-an-api"},"wordCount":599,"commentCount":92,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-calling-an-api#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/files-ts.png","keywords":["Ionic","Ionic 2","Tutorials"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-calling-an-api#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-calling-an-api","url":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-calling-an-api","name":"10 Minutes with Ionic 2: Calling an API - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-calling-an-api#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-calling-an-api#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/files-ts.png","datePublished":"2016-04-20T15:36:07+00:00","dateModified":"2023-07-18T15:48:18+00:00","description":"In this article, we\u2019ll build on what we learned in previous articles and look at calling backend APIs using a class.","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-calling-an-api#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-calling-an-api"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-calling-an-api#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/files-ts.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/files-ts.png","width":196,"height":134},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-calling-an-api#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"10 Minutes with Ionic 2: Calling an API"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/f919a9d571424a39c0ec8ce6d44755e7","name":"Andrew McGivery","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/30cc07af4f34ecef53282a28baa6b213feb275e5abbd28b62d197851aff4ca7e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/30cc07af4f34ecef53282a28baa6b213feb275e5abbd28b62d197851aff4ca7e?s=96&d=mm&r=g","caption":"Andrew McGivery"},"description":"My name is Andrew McGivery. I currently work full time as an application developer at Manulife Financial in Canada.","sameAs":["http:\/\/www.mcgivery.com\/","https:\/\/x.com\/andrewmcgivery"],"url":"https:\/\/ionic.io\/blog\/author\/andrewmcgivery"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/906","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=906"}],"version-history":[{"count":1,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/906\/revisions"}],"predecessor-version":[{"id":5487,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/906\/revisions\/5487"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=906"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=906"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=906"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}