SharePoint

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.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs