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.
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.