SharePoint

How to get all the lists using KnockoutJS and CSOM in SharePoint 2013

Introduction:
 
In this blog you will see how to get all the lists using KnockoutJS and CSOM in SharePoint 2013. Please refer my article to implement KnockoutJS in a SharePoint page.
 
Script:
 
  1. <script src="https://c986.sharepoint.com/SiteAssets/jquery-1.8.3.min.js"></script>    
  2. <script src="https://c986.sharepoint.com/SiteAssets/knockout-3.1.0.js"></script>    
  3. <script src="https://c986.sharepoint.com/SiteAssets/ko.sp-1.0.min.js"></script>    
  4. <script>    
  5.     
  6.     ExecuteOrDelayUntilScriptLoaded(MainFunction, "sp.js");        
  7.     var completeList = null;    
  8.     var listCollection=null;        
  9.     
  10.     // Class used for saving the property values.    
  11.     function List(id, name) {    
  12.         var self = this;  
  13.         self.ID = id;      
  14.         self.Name = name;    
  15.     }    
  16.     
  17.     //  View Model - JavaScript that defines the data and behavior of your UI    
  18.     function ListViewModel() {    
  19.         var self = this;    
  20.         // observableArray equivalent of a regular array,    
  21.         self.Lists = ko.observableArray([]);    
  22.         self.AddLists = function (id,name) {    
  23.         self.Lists.push(new List(id,name));    
  24.         }    
  25.     }    
  26.     
  27.     function MainFunction() {        
  28.         completeList = new ListViewModel();    
  29.     
  30.         // Retrieve the SharePoint Site Content Types    
  31.         retrieveLists();    
  32.     
  33.         // Activates knockout.js    
  34.         ko.applyBindings(completeList);    
  35.     }    
  36.     
  37.     function retrieveLists() {    
  38.         var clientContext = new SP.ClientContext.get_current();    
  39.         var web = clientContext.get_web();    
  40.         this.listCollection = web.get_lists();    
  41.         clientContext.load(listCollection);    
  42.         clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));    
  43.     }    
  44.     
  45.     function onQuerySucceeded(sender, args) {            
  46.         var listsEnumerator = listCollection.getEnumerator();    
  47.         while (listsEnumerator.moveNext()) {    
  48.             var list = listsEnumerator.get_current();    
  49.             completeList.AddLists(list.get_id(), list.get_title());                
  50.         }    
  51.     }    
  52.     
  53.     function onQueryFailed(sender, args) {    
  54.         alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());    
  55.     }    
  56. </script>    
  57. <!-- view - HTML markup that defines the appearance of your UI -->    
  58. <div id="divList">    
  59.     <h2>    
  60.         SharePoint Lists</h2>    
  61.     <br />    
  62.     <table id="tblList" border="1">    
  63.         <thead>    
  64.             <tr>    
  65.                 <th align="center">    
  66.                     ID    
  67.                 </th>    
  68.                 <th align="center">    
  69.                     Name    
  70.                 </th>    
  71.             </tr>    
  72.         </thead>    
  73.         <!-- Iterating through every list item using foreach of KO -->    
  74.         <tbody data-bind="foreach: Lists">    
  75.             <tr>    
  76.                 <td data-bind="text: ID">    
  77.                 </td>    
  78.                  <td data-bind="text: Name">    
  79.                 </td>   
  80.             </tr>    
  81.         </tbody>    
  82.     </table>    
  83. </div>    
Output:
 
 
 
Summary:
 
Thus in this blog you saw how to get all the lists using KnockoutJS and CSOM in SharePoint 2013.
 
Ebook Download
View all
Learn
View all
Membership not found