Using SharePoint JavaScript Client Object Model to Get List Items

Now let us see how to get List Items from SharePoint Site Collection or Web Site Using SharePoint 2013 JavaScript Client Object Model.

Before going through this article you can also check How to Get Web Site Properties Using SharePoint 2013 JavaScript Client Object Model

I'm going to tell you step by step on how to get SharePoint List Items using SharePoint 2013 JavaScript Client Object Model.

1. Add a Page in your site and add a Content Editor Web Part in your page.
2. Add JQuery min file by  adding reference file in your Site Assets or Add google api reference in Content Editor Web Part.

<script type="text/JavaScript"
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

3. Load "SP.js" file in your Content Editor Web Part (in SharePoint 2013 it is registered by default).

<script type="text/JavaScript" src="/_layouts/SP.js"></script>

Retrieve the List Items from site.

<script type="text/JavaScript">
RegisterSod('sp.js', _spPageContextInfo.siteServerRelativeUrl +
  '/_layouts/15/SP.js');

$(document).ready(function () {
  ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");
});

var siteUrl = _spPageContextInfo.siteServerRelativeUrl ;

function retrieveListItems() {
    var clientContext = new SP.ClientContext(siteUrl);
    var oList = clientContext.get_web().get_lists().getByTitle('Announcements');
        
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View><Query><Where><Geq><FieldRef Name=\'ID\'/>' + 
        '<Value Type=\'Number\'>15</Value></Geq></Where></Query><RowLimit>10</RowLimit></View>');
    this.collListItem = oList.getItems(camlQuery);       
    clientContext.load(collListItem);


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

function onQuerySucceeded(sender, args) {
    var listItemInfo = '';
    var listItemEnumerator = collListItem.getEnumerator();

        
    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();
        listItemInfo += '\nID: ' + oListItem.get_id() + 
            '\nTitle: ' + oListItem.get_item('Title') + 
            '\nBody: ' + oListItem.get_item('Body');
    }
    alert(listItemInfo.toString());
}

function onQueryFailed(sender, args) {
    alert('Error: ' + args.get_message() + '\n' + args.get_stackTrace());
}
</script>

Using Include Method:

Now lets go into some more details on how to retrieve selected column values of Lists. To reduce unnecessary data transference between client and server, you can return only specified column values in the lists.

var siteUrl = '/sites/MySiteColURL';

function retrieveListItemsInclude() {
    var clientContext = new SP.ClientContext(siteUrl);
    var oList = clientContext.get_web().get_lists().getByTitle('Announcements');

    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View><RowLimit>10</RowLimit></View>');
    this.collListItem = oList.getItems(camlQuery);

    clientContext.load(collListItem, 'Include(Id, Title)');
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded),
         Function.createDelegate(this, this.onQueryFailed));
}

function onQuerySucceeded(sender, args) {
    var listItemInfo = '';
    var listItemEnumerator = collListItem.getEnumerator();

    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();
        listItemInfo += '\nID: ' + oListItem.get_id() + 
            '\nDisplay name: ' + oListItem.get_displayName() + 
            '\nUnique role assignments: ' + oListItem.get_hasUniqueRoleAssignments();
    }
    alert(listItemInfo.toString());
}

function onQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

Note
If you try to access other properties you see an exception message because other properties are not loaded in this context.

You can get more info in MSDN. Hope this Article is Helpful for you.