SharePoint 2013 - Retrieve all items from a SharePoint list using JavaScript Object Model (JSOM)

In the previous post we discussed the basics of JavaScript Object Model (JSOM). In this post, we will implement JSOM inside a Content editor webpart. As per your requirement you can implement JSOM inside a Site page, Application page or a Master page directly.

Create a custom list for retrieving data from client side
Create a custom list named "Products" with three columns Title, Description and Price.

Code for retrieving all items from a SharePoint list
In the previous post we have already discussed about the objects and methods used in JSOM. Following is complete code for implementing JSOM for retrieving all items from a SharePoint list.

Code Snippet

1. <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>
2. <script type="text/javascript" src="_layouts/15/sp.runtime.js"></script>
3. <script type="text/javascript" src="_layouts/15/sp.js"></script>
4.  
5. <script type="text/javascript">
6.     function GetProducts() {
7.         var clientContext = new SP.ClientContext.get_current();
8.         var oList = clientContext.get_web().get_lists().getByTitle('Products');
9.         this.collListItem = oList.getItems("");
10.  
11.         clientContext.load(collListItem);
12.         clientContext.executeQueryAsync(
13.             Function.createDelegate(this, this.onQuerySucceeded),
14.             Function.createDelegate(this, this.onQueryFailed)
15.         );
16.     }
17.  
18.     function onQuerySucceeded(sender, args) {
19.         var ProductInfo = '';
20.         var listItemEnum = collListItem.getEnumerator();
21.  
22.         while (listItemEnum.moveNext()) {
23.             var oListItem = listItemEnum.get_current();
24.             ProductInfo += '\n\nID: ' + oListItem.get_id() +
25.                 '\nTitle: ' + oListItem.get_item('Title') +
26.                 '\nDesc: ' + oListItem.get_item('Description') +
27.                 '\nPrice: ' + oListItem.get_item('Price');
28.         }
29.  
30.         alert(ProductInfo.toString());
31.     }
32.  
33.     function onQueryFailed(sender, args) {
34.         alert('Request failed. ' + args.get_message() +
35.             '\n' + args.get_stackTrace());
36.     }
37. </script>​
38.  
39. <input type="button" value="Get Products" onclick="GetProducts()"/>

Copy the above code in a Content editor web part
Go to the SharePoint site and add a content editor web part.

Choose the Edit Source option and the HTML source window will pop up.

Copy the code mentioned in the previous step and paste it inside the HTML source window as follows. Click OK button and save the page.

Displaying the data
Click on the "Get Products" button and all the list items in the Products list will be displayed as an alert.