Get list item url javascript object model

Question

This is such a simple question I thought that it would have been answered somewhere else (but can't find a clear answer).... How do I get the list item url using the javascript object model?

I'm creating a blog slider and I want the user to be able to link to the article from the slider.

Relevant code as follows:

function retrieveListItems() {

var clientContext = new SP.ClientContext(siteUrl);
var oList = clientContext.get_web().get_lists().getByTitle('Posts');

var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml('<View><Query><Where><Geq><FieldRef Name=\'ID\' Ascending="False"/>' + 
    '<Value Type=\'Number\'>1</Value></Geq></Where><OrderBy><FieldRef Name =\'Modified\' Ascending="False"/></Query><RowLimit>3</RowLimit></OrderBy></View>');
this.collListItem = oList.getItems(camlQuery);

clientContext.load(collListItem, 'Include(Id, Title,  Summary, Image)');

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

}

function onQuerySucceeded(sender, args) {

var listItemInfo = '';

var listItemEnumerator = collListItem.getEnumerator();
      var itemHtml;
    var fullHtml;

while (listItemEnumerator.moveNext()) {
    var oListItem = listItemEnumerator.get_current();
    var htmlHead = '<div id="slider" class="nivoSlider">';
    var htmlFoot ='</div>';

    if(oListItem.get_item("Image")){
    listItemInfo += '\nID: ' + oListItem.get_id() + 
        '\nTitle: ' + oListItem.get_item('Title') + 
        '\nSummary: ' + oListItem.get_item('Summary') +
        '\nImage url: '+ oListItem.get_item('Image').get_url() +
        '\nItem url: ' + oListItem.get_item('urlfieldname').get_url();
     if (itemHtml === undefined || itemHtml === null) 
      {

         itemHtml = '<img src="' + oListItem.get_item('Image').get_url() + '" title="'+ oListItem.get_item('Title')+'" />';
        }
    else{
              itemHtml += '<img src="' + oListItem.get_item('Image').get_url() + '" title="'+ oListItem.get_item('Title')+'" />';
        }   

       }


        //create html block for slider div
        fullHtml =  itemHtml ;


}
//insert new html into innerHTML of slider div

   document.getElementById("slider").innerHTML = fullHtml;
alert(fullHtml);
$('#slider').nivoSlider(); 
}

Answer 1

There is a property on the list for the default dispform, newform and editform url.

Example:

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

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());  
});

Answer 2

You can generate your list item URL manually by item id. Let say your

List Name: Post

Item ID: 10

Site URL: http://sharepoint.com

So item URL will be like following

http://sharepoint.com/Lists/Post/DispForm.aspx?ID=10

I am supposing that your default display form name is DispForm.aspx. If it is different in your case, then change it in URL.