---
title: "Building Single-Page Applications (SPAs) with Knockout.js and RESTful APIs"
description: "Single-page applications (SPAs) provide a seamless user experience by dynamically updating the content of a web page without requiring a full page rel"
author: "Ravi Vishwakarma"
published: 2024-06-26
updated: 2024-06-26
canonical: https://www.mindstick.com/blog/304436/building-single-page-applications-spas-with-knockout-js-and-restful-apis
category: "knockcout js"
tags: ["web development", "knockout.js", "front-end development"]
reading_time: 5 minutes
---
# Building Single-Page Applications (SPAs) with Knockout.js and RESTful APIs
[**Single-page applications (SPAs)**](https://www.mindstick.com/articles/334364/handling-single-page-applications-spas-insights-from-google-and-beyond) provide a seamless [user experience](https://www.mindstick.com/articles/12731/the-importance-of-feedback-to-the-user-experience) by dynamically updating the content of a web page without requiring a full page reload. Knockout.js, with its powerful data-binding and MVVM (Model-View-ViewModel) [architecture](https://www.mindstick.com/articles/249193/top-5-reasons-to-pursue-architecture), is an excellent choice for building SPAs. Combined with [RESTful APIs](https://www.mindstick.com/articles/337404/how-to-build-and-consume-restful-apis-using-php), you can create highly [responsive](https://www.mindstick.com/forum/12845/how-to-responsive-div-table-struggle-multiple-rows) and [interactive web](https://answers.mindstick.com/qa/104427/how-to-use-javascript-for-interactive-web-pages) applications. This guide will walk you through building an SPA using Knockout.js and RESTful APIs.
#### Setting Up the Project
**Create the Project [Structure](https://www.mindstick.com/articles/23258/choose-your-business-structure-wisely)**
```plaintext
knockout-spa/
├── index.html
├── app.js
├── styles.css
├── api/
│ ├── products.json
└── server.js
```
## Create the HTML File
## index.html
```html
Bootstrap demo
```
## Create the Knockout.js ViewModel
## app.js
```javascript
// ViewModel for the application
class AppViewModel {
constructor() {
var self = this;
// Observables to store data and state
self.response = ko.observable({}); // Observable to store the response data
self.currentPage = ko.observable(0); // Observable to track the current page
self.totalPages = ko.observable(0); // Observable to track the total number of pages
self.pagination = ko.observable({}); // Observable to store pagination data
self.isLoading = ko.observable(false); // Observable to track loading state
self.error = ko.observable(null); // Observable to store error message
self.pageNo = ko.observable(self.pagination().current_page ? self.pagination().current_page : 1);
self.pageNo.subscribe(function(newValue){
let url = 'https://api.artic.edu/api/v1/artworks?page='+ parseInt(newValue);
self.fetchData(url);
});
// Function to fetch data from the API
self.fetchData = async function (url = '') {
self.isLoading(true); // Set loading state to true
self.error(''); // Clear any previous errors
let _url = url || 'https://api.artic.edu/api/v1/artworks'; // Default URL
try {
// Simulate an asynchronous API call using fetch
let response = await fetch(_url);
if (!response.ok) {
// If response is not ok, throw an error
throw new Error('Network response was not ok ' + response.statusText);
}
let result = await response.json(); // Parse response as JSON
self.response(result); // Update the observable array with the fetched data
// Extract pagination data from the response and update observables accordingly
if (result.pagination) {
self.pagination(result.pagination);
}
} catch (err) {
// If an error occurs during fetch, set error message
self.error(err.message);
} finally {
// Set loading state to false regardless of success or failure
self.isLoading(false);
}
};
self.showDetails = function(link) {
// Add your code to handle details here
console.log("Link clicked:", link);
}
}
}
// Apply bindings
ko.applyBindings(new AppViewModel());
```
## Create the Product Section Template
Modify **index.html** to include the product list template.
```html