Retrieve the List Items in SharePoint 2013 Using JavaScript

You can use the SharePoint client object model to retrieve, update and manage data in SharePoint 2013. SharePoint makes the object model available in several forms.

  • .NET Framework redistributable assemblies
  • JavaScript library
  • REST/OData endpoints
  • Windows Phone assemblies
  • Silverlight redistributable assemblies

This article shows how to perform basic operations using the JavaScript object model. You can add a reference to the object model using HTML <script> tags.

The following sections describe tasks that you can complete programmatically and they include JavaScript code examples that show the operations.

Procedure: Open your SP Site in SharePoint 2013 Designer. Then select an Assets icon from the designer ribbon to add a JavaScript file.

After adding a JavaScript file, the following file is available in the SharePoint Site Assets Folder:

Go to the SP site page and add a new page to the SharePoint site.

After adding a page select an Insert button in the Ribbon Menu.

Then add a Content Editor Web part into the page.

Edit the WebPart and add a JavaScript file link to the content link.

Save the web part and save the page in site. Click the button!

List Created Successfully.

Source Code

  1. <div><button onclick=" queryListItems ()">Click here to Create a List</button></div>  
  3. <div id="displayDiv"></div>  
  4.    <script type="text/javascript">  
  5.       //This example gets all the items in the Announcements list that have a title that begins with 'T'.  
  6.       //If your site doesn't include a list called Announcements you must make the changes indicated  
  8.       //This variable will hold a reference to the Announcements list items collection  
  9.       var returnedItems = null;  
  11.       //This function loads the list and runs the query asynchronously  
  12.       function queryListItems() {  
  13.          //Get the current context  
  14.          var context = new SP.ClientContext();  
  15.          //Get the Announcements list. Alter this code to match the name of your list  
  16.          var list = context.get_web().get_lists().getByTitle('Announcements');  
  17.          //Create a new CAML query  
  18.          var caml = new SP.CamlQuery();  
  19.          //Create the CAML that will return only items with the titles that begin with 'T'  
  20.          caml.set_viewXml("<View><Query><Where><BeginsWith><FieldRef Name='Title' /><Value Type='Text'>T</Value></BeginsWith>            </Where></Query></View>");  
  21.          //Specify the query and load the list oject  
  22.          returnedItems = list.getItems(caml);  
  23.          context.load(returnedItems);  
  24.          //Run the query asynchronously, passing the functions to call when a response arrives  
  25.          context.executeQueryAsync(onSucceededCallback, onFailedCallback);  
  26.       }  
  28.       //This function fires when the query completes successfully  
  29.       function onSucceededCallback(sender, args) {  
  30.          //Get an enumerator for the items in the list  
  31.          var enumerator = returnedItems.getEnumerator();  
  32.          //Formulate HTML from the list items  
  33.          var markup = 'Items in the Announcements list that start with "T": <br><br>';  
  34.          //Loop through all the items  
  35.          while (enumerator.moveNext()) {  
  36.          var listItem = enumerator.get_current();  
  37.          markup += 'Item Title: ' + listItem.get_item('Title') + '<br>';  
  38.          markup += 'Item ID: ' + listItem.get_id() + '<br><br>';  
  39.       }  
  40.       //Display the formulated HTML in the displayDiv element  
  41.       displayDiv.innerHTML = markup;  
  42.    }  
  43.    //This function fires when the query fails  
  44.    function onFailedCallback(sender, args) {  
  45.       //Formulate HTML to display details of the error  
  46.       var markup = '<p>The request failed: <br>';  
  47.       markup += 'Message: ' + args.get_message() + '<br>';  
  48.       //Display the details  
  49.       displayDiv.innerHTML = markup;  
  50.    }  
  51. </script> 

Thanks for reading my article.