How to get all the List 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 list = clientContext.get_web().get_lists().getByTitle("Employee Details");        
  39.         this.contentTypeCollection = list.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.         List 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 list Content Types using KnockoutJS and CSOM in SharePoint 2013.