Using Aurelia-http-client for a HTTP GET Request

Rajnilari2015
Posted by in Aurelia category on for Beginner level | Points: 250 | Views : 316 red flag
Rating: 5 out of 5  
 1 vote(s)

Aurelia-http-client includes a basic HttpClient to provide an interface to the browser's XMLHttpRequest object. In this article, we will look into how to use Aurelia-http-client for a HTTP GET Request.


 Download source code for Using Aurelia-http-client for a HTTP GET Request

Recommendation
Read Getting Started with Aurelia before this article.

Introduction

Aurelia-http-client includes a basic HttpClient to provide an interface to the browser's XMLHttpRequest object. In this article, we will look into how to use Aurelia-http-client for a HTTP GET Request.

Aurelia - Project Setup

Create a folder say AureliaExperiment at your favorite location.

Then download the basic Aurelia project setup zipped file from here.

Extract the Zipped file and copy it under AureliaExperiment folder. It looks as under

Straight to Experiment

At first, we need to import the below statement.

import {HttpClient} from 'aurelia-http-client';

Then invoke the get method on the httpClient instance as shown below in the app.js file.

app.js
---------
import {HttpClient} from 'aurelia-http-client';

let httpClient = new HttpClient();

export class App {

  constructor() { 
  
    this.UserRecords = null;
      this.fetchUserDataFromWebService(); 
  } 

  fetchUserDataFromWebService()
  {

          httpClient.get('http://jsonplaceholder.typicode.com/posts')
          .then(data => {        
          this.UserRecords = JSON.parse(data.response);
        });
  }
}

The data that we receive, comes in the format

From that, we need to obtain only the response property. Henceforth, we are doing data.response which looks

It's a JSON object. Now we need to convert the JSON to JavaScript Array Object. For that reason, we are using JSON.parse method

Finally, we assign it to the UserRecords property.

Now let's open the app.html file and write the below template

app.html
---------
<template>
  <table border="1">
    <thead>
      <tr>        
        <td><b>Id</b></td>
        <td><b>UserId</b></td>
        <td><b>Title</b></td>
        <td><b>Description</b></td>
      </tr>
    </thead>
    <tbody>
      <tr repeat.for="userRecord of UserRecords">     
        
        <td>${userRecord.id}</td>
        <td>${userRecord.userId}</td>
        <td>${userRecord.title}</td> 
        <td>${userRecord.body}</td> 

      </tr>
    </tbody>
  </table>
</template>

The purpose of Repeat.for is to iterate over objects. After we iterate the UserRecords array, we have bound the properties of the object by using the {object.property} syntax of Aurelia. The result is as under

Reference

aurelia-http-client

Conclusion

In this article we have learnt how to use Aurelia-http-client for a HTTP GET Request. Hope this will be useful. Thanks for reading. Zipped file attached.

Recommendation
Read Creation of Custom Elements in Aurelia after this article.
Page copy protected against web site content infringement by Copyscape

About the Author

Rajnilari2015
Full Name: Niladri Biswas (RNA Team)
Member Level: Platinum
Member Status: Member,MVP
Member Since: 3/17/2015 2:41:06 AM
Country: India
-- Thanks & Regards, RNA Team


Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)