How to get the users from a multivalued field using JSCOM?

Assume you have a SharePoint list called Projects with a field called Members of type Person or Group and the option Allow Multiple Selections is enabled. You are to retrieve the users from the Members field using JavaScript Client Object Model (JSCOM).

Note: A similar problem and solution for the Managed Client Object Model can be found here.

In this case the value of the Members field is an instance of SPFieldUserValueCollection on the server side, on the client side it’s an array of FieldUserValue instances. This latter type is a special case of the lookup value, inherited from the FieldLookupValue type, so we can access its members similarly, that means, we should use the get_lookupId and get_lookupValue methods.

In our case the JavaScript code to access the members of a specific project looks like this:

1. <script type="text/javascript">
2.  
3. var siteUrl = '/';
4.  
5. function retrieveListItems() {
6.  
7.     var clientContext = new SP.ClientContext(siteUrl);
8.     var projectList = clientContext.get_web().get_lists().getByTitle('Projects');
9.         
10.     // instead of the simple CAML query we could use the getItemById method of the list object
11.     // especially if we need a simple item only
12.     // but if we need for example the top 5 items, the CAML way is easier
13.     var camlQuery = new SP.CamlQuery();
14.     camlQuery.set_viewXml('<View><Query><Where><Geq><FieldRef Name=\'ID\'/><Value Type=\'Number\'>1</Value></Geq></Where></Query><RowLimit>5</RowLimit></View>');
15.     this.collListItem = projectList.getItems(camlQuery);
16.         
17.     clientContext.load(collListItem);
18.         
19.     clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));        
20.         
21. }
22.  
23. function onQuerySucceeded(sender, args) {
24.     var listItemInfo = '';
25.     var listItemEnumerator = collListItem.getEnumerator();
26.     while (listItemEnumerator.moveNext()) {
27.          var oListItem = listItemEnumerator.get_current();
28.         var result = '';
29.         var members = oListItem.get_item('Members');
30.         for(i=0; i<members.length; i++)
31.         {
32.             var member = members[i];
33.             result += member.get_lookupId() + ', ' + member.get_lookupValue() + '\n';
34.         }  
35.  
36.        
37.         listItemInfo += '\nID: ' + oListItem.get_id() +
38.         '\nMembers: ' +  result +
39.             '\nTitle: ' + oListItem.get_item('Title');
40.     }
41.  
42.     alert(listItemInfo.toString());
43. }
44.  
45. function onQueryFailed(sender, args) {
46.  
47.     alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
48. }
49.  
50. ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.ribbon.js");
51.  
52. </script>