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

In this blog you will see 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.