SP2013: Get item by id from javascript function?

Question

I have built a display template. In the item template I have some Images from the list "Employees". I have created a function to get some detail info. In this function I have one parameter with the id from the selected item from "Employees". Now I would like to get an item from another list "EmployeeDetailInfo". In this list there is a lookup field to the "Employees" list. I would like to get an item from this list by the listItemID. How can I do this in a function?

function GetDetailInfo(itemID) {
   [some logic to get item from the list "EmployeeDetail"]
   var title = .....
   alert(title);
}

Answer 1

Use this function from msdn

  //Get the list item from the Announcements list whose Id is 4. Note that this is the ID of the item in the list, not a reference to its position in the collection.
   var itemId = 4;   
   var targetListItem;

   function runCode() {
     var clientContext = new SP.ClientContext(); 
     var targetList = clientContext.get_web().get_lists().getByTitle('Announcements');
     targetListItem = targetList.getItemById(itemId);
     clientContext.load(targetListItem, 'Title');
     clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
   }

   function onQuerySucceeded() {

       alert('Request succeeded. \n\nRetrieved Item is: ' + targetListItem.get_item('Title'));

   }

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

Change list name 'Announcements' and item id '4' to yours.

Answer 2

You need to use JSOM or REST to get the item. This in return means you must implement some kind of asynchronous behavior in GetDetailInfo.

For example (usin jQuery ajax):

function GetDetailInfo(itemID, callback) {
  $.ajax({
    url: "/_api/Web/Lists/getByTitle('EmployeeDetailInfo')/Items/getById(" + itemID + ")", 
    headers: {
      Accept: "application/json; odata=verbose"
     }
   }).success(callback);
}

Then you call it like this:

GetDetailInfo(1, function(item) {
   // work with item
});

This approach should work fine in display templates, and we have done this before without issues. Although note that this approach will create 1 REST call for each line, you could think of some way to get around that problem.

Answer 3

Only for de new SharePoint BD developers, you can use the two answers in this post, both are correct, but know the difference:

1. Using JSOM request (Java Script Object Model). You use the list as a real database. With NO LIMIT. You use the typical READ / GET atomic operation. But its easier with JSON. Official documentation here: Microsoft link

2. Using JSON request (Java Script Object Notation) its easier than JSOM, but you can only access an item if the list has a maximun of 5000 items. Its the limit established by Microsoft. If the list has more than 5000 items, the request sent you an error. Check it out: Sharepoint list limit