Using Aurelia-http-client for a HTTP GET Request

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

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.