Retrieve Items From a List in SharePoint 2013 Using CSOM JavaScript

Introduction

This article explains how to retrieve items from a list in SharePoint 2013 using CSOM-JavaScript.

Prerequisites

1. Ensure you have access to the Office 365 online.
2. Ensure the Napa tool is available in your site.

Steps to be followed

1. Create an app for SharePoint using Office 365 Tools. If you have missed out on how to create an app in SharePoint 2013, then  Click here.
2. Create a list and name it “MyCustomList”. Click here if you want to learn how to create a list.
3. Click on the Default.aspx page.
   
   
   
   
4. Place the following code  inside the “PlaceHolderMain” tag.
    
   <div id=”listItems”></div>
    
5. Click on the App.js file.
   
   
   
   
6. Globally declare the content, web and list objects as shown below.
    

       var context = SP.ClientContext.get_current(); //gets the current context

       var web = context.get_web(); //gets the web object

       var list = web.get_lists(); //gets the collection of lists

       var targetList;

       var results;

       var itemColl;
    

7. Now write the function to retrieve items from the list.
    

        function retrieveListItems() {

           targetList = list.getByTitle("MyCustomList"); //get the list details

           var camlQuery = new SP.CamlQuery(); //initiate the query object

           camlQuery.set_viewXml(

           '<View><Query><Where><Contains><FieldRef Name=\'Title\'/>' +

           '<Value Type=\'Text\'>V</Value></Contains></Where></Query>' +

           '<RowLimit>10</RowLimit></View>'

        );

           itemColl = targetList.getItems(camlQuery);

           //returns the item collectionbased on the query

           context.load(itemColl);

           context.executeQueryAsync(retrieveListItemsSuccess, retrieveListItemsFail);

       }
    

8. In the preceding sample code snippet we are retrieving the list items based on the query.
9. “getItems” is one of the method that is used to retrieve the items from the list using the listitem object.This method specifies which items to return.
10. This method returns the Item collection.
11. The following example displays the ID and Title of the first 10 items in the MyCustomList list, whose collection Title contains the letter “V”.
12. Load the Item collection object and then execute the code by calling executeQueryAsync().
     

    function retrieveListItemsSuccess() {

    var listItemEnumerator = itemColl.getEnumerator();

     result = "List Items :<ul><li>ID             Title</li>";

     while (listItemEnumerator.moveNext()) {

     var oListItem = listItemEnumerator.get_current();

     var listDetails = "<li>" + oListItem.get_id() + "     " + oListItem.get_item('Title') + "</li>";

     result = result + listDetails;

     }

     result = result + "</ul>";

     var data = document.getElementById('listItems');

     data.innerHTML = "";

     data.innerHTML = result;

      $('#message').text = result;

     }

     // This function is executed if the above call fails

     function retrieveListItemsFail(sender, args) {

        alert('Failed to get list items. Error:' + args.get_message());

    }

     

13. That's it. Now let's start testing.

Testing

1. Now to run the app click on the "Play" button that is available towards the left-most corner.
   
   
   
   
2. The app is packaged, deployed, and installed on your Office 365 Site.
   
   
   
   
3. Just go to the following URL:
    
   Syntax: https://yoursite/Lists/ListName
   Example: https://mysite/Lists/MyCustomList 
    
4. In “MyCustomList” there are totally 5 items.
   
   
   
   
5. Depending on our query we need to retrieve the items whose title contains the letter “V”.
6. Now let's navigate to the results page and check.
   
   
   
   
7. That's it!!! We are able to see only the items whose title contains the letter “V”.

Summary

Thus in this article you saw how to retrieve the items from a list in SharePoint 2013 using CSOM-JavaScript.