How to get all the Site Content Types using KnockoutJS and CSOM in SharePoint 2013

Introduction:
 
 In this blog you will see how to get all the Site Content Types 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 completeCTList = null;  
  8.     var contentTypeCollection=null;      
  9.   
  10.     // Class used for saving the property values.  
  11.     function CTList(name) {  
  12.         var self = this;  
  13.         self.Name = name;  
  14.     }  
  15.   
  16.     //  View Model - JavaScript that defines the data and behavior of your UI  
  17.     function CTListViewModel() {  
  18.         var self = this;  
  19.         // observableArray equivalent of a regular array,  
  20.         self.ContentTypes = ko.observableArray([]);  
  21.         self.AddContentTypes = function (name) {  
  22.             self.ContentTypes.push(new CTList(name));  
  23.         }  
  24.     }  
  25.   
  26.     function MainFunction() {      
  27.         completeCTList = new CTListViewModel();  
  28.   
  29.         // Retrieve the SharePoint Site Content Types  
  30.         retrieveContentTypes();  
  31.   
  32.         // Activates knockout.js  
  33.         ko.applyBindings(completeCTList);  
  34.     }  
  35.   
  36.     function retrieveContentTypes() {  
  37.         var clientContext = new SP.ClientContext.get_current();  
  38.         var web = clientContext.get_web();  
  39.         this.contentTypeCollection = web.get_contentTypes();  
  40.         clientContext.load(contentTypeCollection);  
  41.         clientContext.executeQueryAsync(Function.createDelegate(thisthis.onQuerySucceeded), Function.createDelegate(thisthis.onQueryFailed));  
  42.     }  
  43.   
  44.     function onQuerySucceeded(sender, args) {          
  45.         var contentTypeEnumerator = contentTypeCollection.getEnumerator();  
  46.         while (contentTypeEnumerator.moveNext()) {  
  47.             var content = contentTypeEnumerator.get_current();  
  48.             completeCTList.AddContentTypes(content.get_name());              
  49.         }  
  50.     }  
  51.   
  52.     function onQueryFailed(sender, args) {  
  53.         alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());  
  54.     }  
  55. </script>  
  56. <!-- view - HTML markup that defines the appearance of your UI -->  
  57. <div id="divCTList">  
  58.     <h2>  
  59.         Site Content Types</h2>  
  60.     <br />  
  61.     <table id="tblEmployeeList" border="1">  
  62.         <thead>  
  63.             <tr>  
  64.                 <th>  
  65.                     Name  
  66.                 </th>  
  67.             </tr>  
  68.         </thead>  
  69.         <!-- Iterating through every list item using foreach of KO -->  
  70.         <tbody data-bind="foreach: ContentTypes">  
  71.             <tr>  
  72.                 <td data-bind="text: Name">  
  73.                 </td>  
  74.             </tr>  
  75.         </tbody>  
  76.     </table>  
  77. </div>  
 Output:
 
 
 
Summary:
 
Thus in this blog you saw how to get all the Site Content Types using KnockoutJS and CSOM in SharePoint 2013.