Load and use a specifed List View in JavaScript

Question

I have a list view set up via the webinterface of Sharepoint. Now I want to use this view (the CAML XML) to be loaded into javscript to provide list items for a Content Editor Webpart. The view works as intended on the Sharepoint website. But when I load the view via JavaScript my defined filters:

1. Sort in descending order after Date of Creation
2. Limit the displayed list items to 3 Items

don't work. The items returned from the AsyncQuery are all list items and are not ordered as specified.

Can anybody help me?

My Code:

getItemsFromView: function (listTitle, viewTitle, context)
    {
        var list = context.get_web().get_lists().getByTitle(listTitle);
        var view = list.get_views().getByTitle(viewTitle);
        var query = new SP.CamlQuery();
        context.load(view);
        context.load(list);
        context.executeQueryAsync(
            function(sender,args) { query.set_viewXml("<View><Query>" + view.get_viewQuery() + "</Query><RowLimit>3</RowLimit></View>");},
        function(sender,args) {alert('Getting news failed. ' + args.get_message() + '\n' + args.get_stackTrace())}
        );


        var items = list.getItems(query);
        context.load(items);

        context.executeQueryAsync(Function.createDelegate(this, function(){this.onQuerySucceeded(items)}), Function.createDelegate(this, this.onQueryFailed));
    },

Answer 1

Remove this:

context.load(view);
context.load(list);
context.executeQueryAsync(
function(sender,args) { query.set_viewXml("<View><Query>" + view.get_viewQuery() + "</Query><RowLimit>3</RowLimit></View>");},
function(sender,args) {alert('Getting news failed. ' + args.get_message() + '\n' + args.get_stackTrace())});

and replace with:

var myQuery = "YOUR CAML QUERY";
query.set_viewXml("<View><Query>" + myQuery + "</Query><RowLimit>3</RowLimit></View>");

If you really want to first call SharePoint to ask what the CAML query is formed, you need to chain your calls.

context.executeQueryAsync( ()=> { 
// Here you have received the view from the list and can access the query property view.get_viewQuery()
                                  query.set_viewXml("<View><Query>" + 
view.get_viewQuery() + "</Query><RowLimit>3</RowLimit></View>");
var items = list.getItems(query);
context.load(items);
                                  context.executeQueryAsync( 
                                     ()=> 
                                     { // Get result here }
                                     , 
                                     ()={ //second call failed })
                                }, 
                            ()=> { //first fail });

The chaining above is written in short version with TypeScript style. You need to rewrite with Function.delegate if you write pure javascript.