SharePoint 2013/2010: Filter items from list via CAML & JSOM based on Title and created by fields.

Context: An example to load all items (including all fields) from the  following  list  which  are  containing  the  title  “SP”  and  are  created  by  “Muhammad Salman Malik”.

Solution: I wrote the following html and ECMA script(JSOM) to fetch filtered items based on the criteria defined in the context. The following is the code that I wrote to achieve it;

        


            
Title
            
            
Category
            
            
Created
            
            
Created By
            
        


$(window).load(function () {
    $(document).ready(function () {        
        retrieveDocList();
    });
});

function retrieveDocList() {

    var clientContext = new SP.ClientContext.get_current();
    var oList = clientContext.get_web().get_lists().getByTitle('SPDocs'); //Replace ListName here.
    var camlQuery = new SP.CamlQuery();
    
    var strCamlQuery = ''; //fetch the records whose title contains 'SP' and created by 'Steffen Kabus'.
    strCamlQuery += 'SP' +
                    'Muhammad Salman Malik' +
                    '' +
                    '' +                    
                    '' +
                    '' +
                    '' +
                    '' +
                    '';

    camlQuery.set_viewXml(strCamlQuery);
    this.collListItem = oList.getItems(camlQuery);
    clientContext.load(collListItem);
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));

}

function onQuerySucceeded(sender, args) {

    var listItemInfo = '';
    var listItemEnumerator = collListItem.getEnumerator();
    var tr_start = "";
    var tr_end = "

";
    var table_html = null;
    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();

        table_html += tr_start + oListItem.get_item('Title') + "
" +                      
                      "

" + oListItem.get_item('Category') + "

" +
                      "" + oListItem.get_item('Created').format('dd.mm.yyyy') + "

" +
                      "" + oListItem.get_item('Author').get_lookupValue() + tr_end;        
    }
    $("#tblSPDocs").append(table_html);    
}

function onQueryFailed(sender, args) {    
    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

I have created the following list in a site;

The following is the output that was generated after the development;