Retrieve the List Items in SharePoint 2013 & 2016 Using JavaScript

Step1:

Welcome to the designer dairy blog, Here we are going to discuss, how to  Retrieve the List Items in SharePoint 2013 & 2016 Using JavaScript.

The getItems(query) function enables you to define a Collaborative Application Markup Language (CAML) query that specifies which items to return. You can pass an undefined CamlQuery object to return all items from the list, or use the set_viewXml function to define a CAML query and return items that meet specific criteria.

Step2:

SharePoint provides the JavaScript API reference files that contains the information used to access the data and build the custom applications. From the number of files, SP.JS is the most important file in the JSOM that provides the types and members the same as the Microsoft.SharePoint namespace to work with top-level sites, sub-sites and their lists and libraries.

The SP.JS file has the ClientContext object used for representing the context of SharePoint Objects and operations.

$(function () {

    ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");

});

Step3:

//This function loads the list and runs the query asynchronously  


function retrieveListItems() {

//Get the current context 

    var clientContext = new SP.ClientContext();

//Get the Announcements list. Alter this code to match the name of your list  

    var oList = clientContext.get_web().get_lists().getByTitle('Employees');

 //Create a new CAML query  

    var camlQuery = new SP.CamlQuery(); 



    //camlQuery.set_viewXml("<View><RowLimit>1</RowLimit></View>");
   //camlQuery.set_viewXml("<View><Query><Where><BeginsWith><FieldRef Name='FirstName'/><Value Type='Text'>Raja</Value></BeginsWith>"
   //                    + "<Gt><FieldRef Name='ID' /><Value Type='Counter'>2</Value></Gt></Where></Query></View>");
 

//Fetching the data from the list by checking the condition FirstName is equal to (=) Raja and  Id’s are greater than  ( >)  3.

 camlQuery.set_viewXml("<View>"

    +"<Query>"
   +"<Where>"
     +" <Or>"
     + "   <Eq>"
           +" <FieldRef Name='FirstName' />"
           +" <Value Type='Text'>Raja</Value>"
        +" </Eq>"
        +" <Gt>"
         +"   <FieldRef Name='ID' />"
          +"  <Value Type='Counter'>3</Value>"
        +" </Gt>"
      +"</Or>"
   +"</Where>"
+"</Query>"


 +"</View>");

  //Specify the query and load the list object 
 
    this.collListItem = oList.getItems(camlQuery);

    clientContext.load(collListItem);

//Run the query asynchronously, passing the functions to call when a response arrives  

    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));

}

Step3:

//This function fires when the query completes successfully   

function onQuerySucceeded(sender, args) {

    var listItemInfo = '';

 //Get an enumerator for the items in the list  

    var listItemEnumerator = collListItem.getEnumerator();
 
   //Loop through all the items 

    while (listItemEnumerator.moveNext()) {

        var oListItem = listItemEnumerator.get_current();
 

        listItemInfo += '<strong>ID: </strong> ' + oListItem.get_id() +

        ' <strong>Title:</strong> ' + oListItem.get_item('Title') +

        ' <strong>FirstName:</strong> ' + oListItem.get_item('FirstName') +

        ' <strong>LastName:</strong> ' + oListItem.get_item('LastName') +

        '<br />';

    }

 //Displaying the formulated HTML in the divListItems element 

    $("#divListItems").html(listItemInfo);

}

 //This function fires when the query fails 

function onQueryFailed(sender, args) {

    alert('Request failed. ' + args.get_message() +

    '\n' + args.get_stackTrace());

}

Step4:

Output:

Thanks for reading my article.Stay Tune on www.Webdesignersdairy.com  for more updates on SharePoint.