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

In this blog you will see how to get all the list views using KnockoutJS and CSOM in SharePoint 2013

Introduction:

 

In this blog you will see how to get all thelist views 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 completeViewList = null;
    var viewCollection=null;

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

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

    function MainFunction() {
        completeViewList = new ViewModel();

        // Retrieve the SharePoint list views
        retrieveListViews();

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

    function retrieveListViews() {
        var clientContext = new SP.ClientContext.get_current();
        var list = clientContext.get_web().get_lists().getByTitle("Employee Details");
        this.viewCollection = list.get_views();
        clientContext.load(viewCollection);
        clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
    }

    function onQuerySucceeded(sender, args) {
        var viewEnumerator = viewCollection.getEnumerator();
        while (viewEnumerator.moveNext()) {
            var content = viewEnumerator.get_current();
            completeViewList.AddViews(content.get_title());
        }
    }

    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="divViewList">
    <h2>
        List Views</h2>
    <br />
    <table id="tblViewList" border="1">
        <thead>
            <tr>
                <th>
                    Name
                </th>
            </tr>
        </thead>
        <!-- Iterating through every list view using foreach of KO -->
        <tbody data-bind="foreach: Views">
            <tr>
                <td data-bind="text: Name">
                </td>
            </tr>
        </tbody>
    </table>
</div>

Output:

 

Summary:

 

Thus in this blog you saw how to get all the list views using KnockoutJS and CSOM in SharePoint 2013