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

<div><button onclick=" queryListItems ()">Click here to Create a List</button></div>

<div id="displayDiv"></div>
   <script type="text/javascript">
      //This example gets all the items in the Announcements list that have a title that begins with 'T'.
      //If your site doesn't include a list called Announcements you must make the changes indicated

      //This variable will hold a reference to the Announcements list items collection
      var returnedItems = null;

      //This function loads the list and runs the query asynchronously
      function queryListItems() {
         //Get the current context
         var context = new SP.ClientContext();
         //Get the Announcements list. Alter this code to match the name of your list
         var list = context.get_web().get_lists().getByTitle('Announcements');
         //Create a new CAML query
         var caml = new SP.CamlQuery();
         //Create the CAML that will return only items with the titles that begin with 'T'
         caml.set_viewXml("<View><Query><Where><BeginsWith><FieldRef Name='Title' /><Value Type='Text'>T</Value></BeginsWith>            </Where></Query></View>");
         //Specify the query and load the list oject
         returnedItems = list.getItems(caml);
         context.load(returnedItems);
         //Run the query asynchronously, passing the functions to call when a response arrives
         context.executeQueryAsync(onSucceededCallback, onFailedCallback);
      }

      //This function fires when the query completes successfully
      function onSucceededCallback(sender, args) {
         //Get an enumerator for the items in the list
         var enumerator = returnedItems.getEnumerator();
         //Formulate HTML from the list items
         var markup = 'Items in the Announcements list that start with "T": <br><br>';
         //Loop through all the items
         while (enumerator.moveNext()) {
         var listItem = enumerator.get_current();
         markup += 'Item Title: ' + listItem.get_item('Title') + '<br>';
         markup += 'Item ID: ' + listItem.get_id() + '<br><br>';
      }
      //Display the formulated HTML in the displayDiv element
      displayDiv.innerHTML = markup;
   }
   //This function fires when the query fails
   function onFailedCallback(sender, args) {
      //Formulate HTML to display details of the error
      var markup = '<p>The request failed: <br>';
      markup += 'Message: ' + args.get_message() + '<br>';
      //Display the details
      displayDiv.innerHTML = markup;
   }
</script>

Thanks for reading my article.