Post
Ask Question

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

Requirement

  1. Add jQuery 1.7 file
  2. 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:

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

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:

  1. self.GetInsights = function () {  
  2.    $.ajax({  
  3.        url: "https://nil365new.sharepoint.com/ParentSite/_api/lists/getbytitle('CustomerList')/items",//  
  4.         
  5.        // Please add Url of your Site,  
  6.        type: "GET",  
  7.        headers: {  
  8.            "accept": "application/json;odata=verbose",  
  9.        },  
  10.        success: function (data) {  
  11.               self.insights.push(data.d.results);  
  12.        },  
  13.        error: function (error) {  
  14.            alert(JSON.stringify(error));  
  15.        }  
  16.    });  
  17. } 

3. Bind the preceding model to the HTML controls:

  1. $(document).ready(function () {  
  2.  insightModel = new insightViewModel();  
  3.   var insightDiv = document.getElementById("divDatabinding");  
  4.   insightViewModel();  
  5. }); 

4. Write the HTML code as:

  1. <div id="divDatabinding">  
  2.    <table>  
  3.       <thead>  
  4.       <tr>  
  5.       <th>Name</th>  
  6.       </tr>  
  7.       </thead>  
  8.    <tbody data-bind="foreach: insights">  
  9.       <tr>  
  10.          <td style="white-space: pre-wrap" data-bind="text: LinkTitle"></td>  
  11.       </tr>  
  12.    </tbody>  
  13.    </table>  
  14. </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:

  1. <html lang="en-US">    
  2. <head>    
  3.     <meta charset="UTF-8">    
  4. </head>    
  5. <script src="https://nil365new.sharepoint.com/ParentSite/Site%20Scripts/knockout-2.1.0.js"></script>    
  6. <script src="https://nil365new.sharepoint.com/ParentSite/Site%20Scripts/jquery-1.7.1.js"></script>    
  7. <script type="text/javascript">    
  8.     function insightViewModel() {    
  9.         var self = this;    
  10.         self.insights = ko.observableArray([]);    
  11.         self.GetInsights = function () {    
  12.             $.ajax({    
  13.                 url: "https://nil365new.sharepoint.com/ParentSite/_api/lists/getbytitle('CustomerList')/items"  
  14. //Please add Url of your Site,    
  15.                 type: "GET",    
  16.                 headers: {    
  17.                     "accept": "application/json;odata=verbose",    
  18.                 },    
  19.                 success: function (data) {    
  20.                     self.insights.push(data.d.results);    
  21.                 },    
  22.                 error: function (error) {    
  23.                     alert(JSON.stringify(error));    
  24.                 }    
  25.             });    
  26.         }    
  27.         self.GetInsights();    
  28.     }    
  29.     $(document).ready(function () {    
  30.         insightModel = new insightViewModel();    
  31.         var insightDiv = document.getElementById("divDatabinding");    
  32.         insightViewModel();    
  33.     });    
  34. </script>    
  35. <body>    
  36.     <div id="divDatabinding">    
  37.         <table>    
  38.             <thead>    
  39.                 <tr>    
  40.                     <th>Name</th>    
  41.                 </tr>    
  42.             </thead>    
  43.             <tbody data-bind="foreach: rulesinsights">    
  44.                 <tr>    
  45.                     <td style="white-space: pre-wrap" data-bind="text: Title"></td>    
  46.                 </tr>    
  47.             </tbody>    
  48.         </table>    
  49.     
  50.     </div>    
  51. </body>    
  52. </html> 

Future Articles

I will write new article(s) for the following content:

  • Edit/Delete/Add data to SharePoint 2013 List using Knockout (REST API).
  • Search using SharePoint 2013 REST API and Knockout.
  • Paging of HTML table using Knockout.


Similar Articles