---
title: "How to integrate AJAX request in knockout.js?"
description: "How to integrate AJAX request in knockout.js?"
author: "Sandra Emily"
published: 2024-05-28
updated: 2024-05-28
canonical: https://www.mindstick.com/forum/160668/how-to-integrate-ajax-request-in-knockout-js
category: "knockcout js"
tags: ["ajax", "knockout.js"]
reading_time: 3 minutes
---
# How to integrate AJAX request in knockout.js?
Integrate [AJAX request](https://www.mindstick.com/forum/157891/what-is-the-role-of-the-jsonresult-class-in-mvc-how-can-it-use-to-return-data-to-an-ajax-request) with [knockout.js](https://www.mindstick.com/forum/160797/conditional-html-heading-tag-based-on-variable-in-knockout-js) to [fetch data](https://www.mindstick.com/forum/160510/how-to-fetch-data-from-the-database-in-the-dot-net-console-application-using-c-sharp) from [server](https://www.mindstick.com/articles/43769/what-is-serverless-architecture-is-it-worth-switching-over) using [RESTful API](https://www.mindstick.com/articles/335974/retrieve-data-from-restful-api-and-add-paging-in-knockout-js).
## Replies
### Reply by Ashutosh Patel
Making **[AJAX](https://www.mindstick.com/articles/1541/check-availability-of-user-name-or-email-using-asp-dot-net-ajax-and-jquery)** requests with **Knockout.js** is a common practice for fetching [data](https://www.mindstick.com/articles/13050/salesforce-aiming-to-dominate-predictive-analytics-with-data-science) from a server and updating the UI dynamically.
Here's a basic overview of how to do it:
- **Include Knockout.js**: First, make sure you have included Knockout.js in your HTML file.
```javascript
```
- **Define ViewModel**: Create a ViewModel using Knockout.js, which will hold your data and functions related to AJAX requests.
```javascript
function AppViewModel() {
var self = this;
// Observable array to hold fetched data
self.Data = ko.observableArray([]);
// Function to make AJAX request
self.fetchData = function () {
$.ajax({
url: "your_api_endpoint",
method: "GET",
dataType: "json",
success: function (response) {
// Update observable array with fetched data
self.Data(response);
},
error: function (error) {
console.log("error: ", error);
}
});
}
self.fetchData();
}
// Apply bindings when document ready
$(document).ready(function () {
ko.applyBindings(new AppViewModel());
});
```
- **Bind Data to UI**: Use Knockout.js data binding to bind the fetched data to your UI elements
```html
```
**Note:** Make sure to replace **'your_api_endpoint'** with the actual URL of your API endpoint. Additionally, you may need to include jQuery or another library for AJAX functionality if it's not already included in your project.
## Complete Example
```html
Fetch data from RESTful API