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: 

<script src="https://c986.sharepoint.com/SiteAssets/jquery-1.8.3.min.js"></script>
<script src="https://c986.sharepoint.com/SiteAssets/knockout-3.1.0.js"></script>
<script src="https://c986.sharepoint.com/SiteAssets/ko.sp-1.0.min.js"></script>
<script>

    ExecuteOrDelayUntilScriptLoaded(MainFunction, "sp.js");
    var completeCTList = null;
    var contentTypeCollection=null;

    // Class used for saving the property values.
    function CTList(name) {
        var self = this;
        self.Name = name;
    }

    //  View Model - JavaScript that defines the data and behavior of your UI
    function CTListViewModel() {
        var self = this;
        // observableArray equivalent of a regular array,
        self.ContentTypes = ko.observableArray([]);
        self.AddContentTypes = function (name) {
            self.ContentTypes.push(new CTList(name));
        }
    }

    function MainFunction() {
        completeCTList = new CTListViewModel();

        // Retrieve the SharePoint Site Content Types
        retrieveContentTypes();

        // Activates knockout.js
        ko.applyBindings(completeCTList);
    }

    function retrieveContentTypes() {
        var clientContext = new SP.ClientContext.get_current();
        var web = clientContext.get_web();
        this.contentTypeCollection = web.get_contentTypes();
        clientContext.load(contentTypeCollection);
        clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
    }

    function onQuerySucceeded(sender, args) {
        var contentTypeEnumerator = contentTypeCollection.getEnumerator();
        while (contentTypeEnumerator.moveNext()) {
            var content = contentTypeEnumerator.get_current();
            completeCTList.AddContentTypes(content.get_name());
        }
    }

    function onQueryFailed(sender, args) {
        alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
    }
</script>
<!-- view - HTML markup that defines the appearance of your UI -->
<div id="divCTList">
    <h2>
        Site Content Types</h2>
    <br />
    <table id="tblEmployeeList" border="1">
        <thead>
            <tr>
                <th>
                    Name
                </th>
            </tr>
        </thead>
        <!-- Iterating through every list item using foreach of KO -->
        <tbody data-bind="foreach: ContentTypes">
            <tr>
                <td data-bind="text: Name">
                </td>
            </tr>
        </tbody>
    </table>
</div>

 Output:

 

 

 

Summary:

 

Thus in this blog you saw how to get all the Site Content Types using KnockoutJS and CSOM in SharePoint 2013.