How to retrieve list items title using JavaScript

Question

I'm trying to retrieve list items Title to insert it into a div section in my SharePoint home page, I've found this code which retrieve item URL.

it works just fine.

var clientContext = SP.ClientContext.get_current();
var list = clientContext.get_web().get_lists().getByTitle("Artdesk alertes");

var caml = new SP.CamlQuery();
caml.set_viewXml("<View />");

var listItemCollection = list.getItems(caml);

clientContext.load(list, "DefaultDisplayFormUrl");
clientContext.load(listItemCollection);

clientContext.executeQueryAsync(function() {

    for(var i in listItemCollection.get_data()) {

        console.log( "DispFormRelativeUrl: " + list.get_defaultDisplayFormUrl() + "?ID=" +listItemCollection.get_data()[i].get_id() );
    }

}, function(sender, args) {
    window.console && console.log(args.get_message());  
});

How do I get the list item Title using the JavaScript object model?

score 1 · Accepted Answer · answered Aug 08 '16 at 13:46

clientContext.load(list, "DefaultDisplayFormUrl");

You are requesting "DefaultDisplayFormUrl" property here. You can specify Title property or just remove requesting specific properties to get every one of them (not recommended - you must request only those you need to reduce load). So it will be clientContext.load(list, "Title") or clientContext.load(list);

clientContext.executeQueryAsync(function() {    
    var listItemEnumerator = collListItem.getEnumerator();
    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();       
        console.log("List Title", oListItem.get_item('Title'));
    }
}, <...>);

Note that you can get any property via get_item method (but you must request to load that property or it will throw an exception).

Here is the working code:

var clientContext = SP.ClientContext.get_current();
var list = clientContext.get_web().get_lists().getByTitle("Artdesk alertes");

var caml = new SP.CamlQuery();
caml.set_viewXml(""); // empty query also works

var listItemCollection = list.getItems(caml);

clientContext.load(listItemCollection); // i requested every property

clientContext.executeQueryAsync(function() {
    var listItemEnumerator = listItemCollection.getEnumerator();

    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();
        console.log(oListItem.get_item('Title'));
    }

}, function(sender, args) {
    window.console && console.log(args.get_message());  
});

thanks for the explination it work just fine , i have only one last question , how can i do to retrieve only the 2 last items of my list ? — ysfibm, Aug 08 '16 at 13:54
You should use caml query for that. Here is query to retrieve last items ` 2 ` OrderBy node - you tell sharepoint to order items by id field in Descending order (there is not Descending attribute so use Ascending='FALSE'). RowLimit node - take only 2 items. It goes here `caml.set_viewXml();` Note that in lists with 4999+ items you will get threshold error. — Alex K, Aug 08 '16 at 13:59
thanks, in my html page i have a div tag :
how can i put the result of my js fonction in the div ? thanks for the help — ysfibm, Aug 08 '16 at 14:22
when i put the result in document.getElementById('aletres').innerText = result; i get only one item, however in the console log i get the 2 last ones?? — ysfibm, Aug 09 '16 at 08:42

score 0 · Answer 2 · answered Aug 05 '16 at 19:06

Check get_item('Title') on this code from MSDN:

function retrieveListItems(siteUrl) {
    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\'>1</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('Request failed. ' + args.get_message() + 
        '\n' + args.get_stackTrace());
}

yes when i put it in the console , i have no result only undefined — ysfibm, Aug 08 '16 at 13:39

How to retrieve list items title using JavaScript

2 Answers2