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