---
title: "Integrating Knockout.js with RESTful APIs"
description: "Integrating Knockout.js with RESTful APIs allows you to fetch data from a server and update your UI dynamically."
author: "Ravi Vishwakarma"
published: 2024-06-26
updated: 2024-06-26
canonical: https://www.mindstick.com/articles/336250/integrating-knockout-js-with-restful-apis
category: "knockcout js"
tags: ["web development", "knockout.js", "front-end development"]
reading_time: 6 minutes
---
# Integrating Knockout.js with RESTful APIs
Integrating Knockout.js with [RESTful APIs](https://answers.mindstick.com/qa/111790/how-do-i-design-and-implement-restful-apis-for-my-applications) allows you to [fetch data](https://www.mindstick.com/forum/156768/how-to-fetch-data-using-union-method-in-linq) from a server and [update your](https://answers.mindstick.com/qa/96426/how-can-you-update-your-profile-without-notifying-contacts) UI dynamically. Here's a beginner's guide to fetching data and updating it using Knockout.js:
#### 1. Setting Up Your HTML
Start by [setting up](https://answers.mindstick.com/qa/39912/key-west-fl-briefly-seceded-from-the-us-in-1982-in-response-to-the-us-border-patrol-setting-up-roadblocks-on-all-roads-leading-into-and-out-of-the-florida-keys-what-did-the-new-country-call-itself) your HTML structure where you want to [display data](https://www.mindstick.com/forum/34030/how-to-display-data-in-the-table-using-angular-js) fetched from the API.
```html
Bootstrap demo
Data from Server
data found.
😕
No records were found
Add New Post
```
#### 2. Creating Your ViewModel
In your JavaScript file (`app.js`), define your ViewModel, and include functions to fetch data from the API and update your UI.
```javascript
// app.js
// Initialize Knockout validation
ko.validation.init({
registerExtenders: true, // Register custom validation rules
messagesOnModified: true, // Show validation messages as soon as a field is modified
insertMessages: true, // Insert validation messages next to the input elements
parseInputAttributes: true, // Parse HTML5 input attributes for validation rules
errorClass: 'text-danger fw-semibold', // CSS class for validation error messages
messageTemplate: null // Use default message template
}, true);
class AppViewModel {
constructor() {
var self = this;
// Observable array to hold the data fetched from the server
self.items = ko.observableArray([]);
self.searchText = ko.observable('');
self.newTitle = ko.observable('').extend({
required: { message: "Title is required." },
minLength: { params: 2, message: "Title must be at least 2 characters." }
});
self.newBody = ko.observable('').extend({
required: { message: "Body is required." },
minLength: { params: 2, message: "Body must be at least 2 characters." }
});
self.userId = ko.observable('11');
// Function to fetch data from the API
self.fetchData = function() {
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json())
.then(data => {
self.items(data);
})
.catch(error => {
console.error('Error fetching data:', error);
});
};
// Computed observable to filter the items based on the filter criteria
self.filteredItems = ko.computed(function () {
//console.log(self.items().reverse());
// Reverse the items array
var reversedItems = self.items().slice().reverse();
//var filter = self.filter().toLowerCase(); // Convert filter criteria to lowercase
if (!self.searchText) {
return reversedItems; // If no filter, return all items
} else {
// Filter the items based on the filter criteria
return ko.utils.arrayFilter(reversedItems, function (item) {
return JSON.stringify(item).includes(self.searchText().toLowerCase()); // Case-insensitive match
});
}
});
// Function to reverse the observable array
self.reverseArray = function() {
self.items(self.items().slice().reverse());
};
self.filteredItemsLength = ko.computed(function () {
return self.filteredItems().length;
});
self.fetchData();
// Initialize validation
self.errors = ko.validation.group(self);
}
}
// Apply the Knockout bindings to the AppViewModel
ko.applyBindings(new AppViewModel());
```
## Understanding the Code
**HTML**: `