---
title: "How would you handle data fetching and updating in a Knockout.js application?"
description: "Handling data fetching and updating in a Knockout.js application involves integrating your ViewModel with AJAX calls to your server."
author: "Ravi Vishwakarma"
published: 2024-06-26
updated: 2024-06-26
canonical: https://www.mindstick.com/articles/336251/how-would-you-handle-data-fetching-and-updating-in-a-knockout-js-application
category: "knockcout js"
tags: ["web development", "knockout.js", "front-end development"]
reading_time: 4 minutes
---
# How would you handle data fetching and updating in a Knockout.js application?
[**Handling data fetching and updating**](https://www.mindstick.com/articles/335932/retrieving-and-displaying-data-from-a-restful-api-in-knockout-js) in a Knockout.js [application](https://www.mindstick.com/blog/59/xaml-extensible-application-markup-language) involves integrating your [ViewModel](https://www.mindstick.com/forum/157215/what-is-viewmodel-in-mvc) with AJAX calls to your server. Here's a step-by-step [approach](https://yourviews.mindstick.com/view/81036/coronavirus-pandemic-approach-in-dictatorship-of-hungary):
#### 1. Setting up the ViewModel
First, create a ViewModel that will hold the data and the methods to fetch and update the data.
## viewModel.js
```javascript
function AppViewModel() {
var self = this;
// Observables for new product input fields
self.newProductName = ko.observable('');
self.newProductPrice = ko.observable('');
// Observable array to store the list of products
self.products = ko.observableArray([]);
// Observables for editing a product
self.editedProductName = ko.observable('');
self.editedProductPrice = ko.observable('');
self.isEditing = ko.observable(false);
self.currentProduct = ko.observable(null);
// Function to add a new product to the list
self.addProduct = function () {
self.products.push({
name: ko.observable(self.newProductName()),
price: ko.observable(self.newProductPrice())
});
self.newProductName('');
self.newProductPrice('');
};
// Function to start editing a product
self.editProduct = function (product) {
self.currentProduct(product);
self.editedProductName(product.name());
self.editedProductPrice(product.price());
self.isEditing(true);
};
// Function to save changes to the edited product
self.saveProduct = function () {
var product = self.currentProduct();
product.name(self.editedProductName());
product.price(self.editedProductPrice());
self.isEditing(false);
};
// Function to delete a product from the list
self.deleteProduct = function (product) {
self.products.remove(product);
};
// Function to cancel editing a product
self.cancelEdit = function () {
self.isEditing(false);
};
}
// Apply Knockout.js bindings to the AppViewModel
ko.applyBindings(new AppViewModel());
```
#### 2. HTML Markup
Create an HTML markup to display the data and provide a way to add new items.
## index.html
```html
Knockout.js CRUD Demo