SharePoint REST API to Get and Bind Data With Knockout.js

Nilesh Lonkar
9y
19.5k
0
2

Article

Requirement

Add jQuery 1.7 file
Add Knockout 2.0 file

The article shows how to bind SharePoint list data to HTML using Knockout view model data-binding. Currently we assume a list has already been created in your site named CustomerList. Add one page to the site and insert a web part into that page. Then edit the web part with HTML source and then use following procedure.

Procedure

1. Add a Knockout view model as in the following:

function insightViewModel() {
var self = this;
self.insights = ko.observableArray([]);
}

This insights is used for bind the data to the HTML control. It contains the array with the list data.

2. Add a function to get the data from the list:

self.GetInsights = function () {
$.ajax({
url: "https://nil365new.sharepoint.com/ParentSite/_api/lists/getbytitle('CustomerList')/items",//
// Please add Url of your Site,
type: "GET",
headers: {
"accept": "application/json;odata=verbose",
},
success: function (data) {
self.insights.push(data.d.results);
},
error: function (error) {
alert(JSON.stringify(error));
}
});
}

3. Bind the preceding model to the HTML controls:

$(document).ready(function () {
insightModel = new insightViewModel();
var insightDiv = document.getElementById("divDatabinding");
insightViewModel();
});

4. Write the HTML code as:

<div id="divDatabinding">
<table>
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody data-bind="foreach: insights">
<tr>
<td style="white-space: pre-wrap" data-bind="text: LinkTitle"></td>
</tr>
</tbody>
</table>
</div>

5. Call GetInsights at the end of the view model.

Save the page and check the data.

The following code is available with this article:

<html lang="en-US">
<head>
<meta charset="UTF-8">
</head>
<script src="https://nil365new.sharepoint.com/ParentSite/Site%20Scripts/knockout-2.1.0.js"></script>
<script src="https://nil365new.sharepoint.com/ParentSite/Site%20Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript">
function insightViewModel() {
var self = this;
self.insights = ko.observableArray([]);
self.GetInsights = function () {
$.ajax({
url: "https://nil365new.sharepoint.com/ParentSite/_api/lists/getbytitle('CustomerList')/items"
//Please add Url of your Site,
type: "GET",
headers: {
"accept": "application/json;odata=verbose",
},
success: function (data) {
self.insights.push(data.d.results);
},
error: function (error) {
alert(JSON.stringify(error));
}
});
}
self.GetInsights();
}
$(document).ready(function () {
insightModel = new insightViewModel();
var insightDiv = document.getElementById("divDatabinding");
insightViewModel();
});
</script>
<body>
<div id="divDatabinding">
<table>
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody data-bind="foreach: rulesinsights">
<tr>
<td style="white-space: pre-wrap" data-bind="text: Title"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>