A colleague of mine recently had a challenge reading data out of a SharePoint person field via REST and then rendering it in AngularJS. As it turns out, I had the same challenge recently and found the solution … so here it is!
If you simply read the person field, you’ll end up with the user ID, which isn’t too helpful. The key is to use the OData $expand option to join the user ID to the user information (stored in a hidden list in every site collection). Here’s a sample.
$http.get("https://<servername>/sites/doccenter/" +
"_api/web/lists/GetByTitle('Documents')/items?" +
"$select=Title,Customer,FileLeafRef,FileRef,UniqueId,Modified," +
"Author/Name,Author/Title" +
"&$expand=Author/Id" +
"&$filter=Customer eq '" + item.CustomerName + "'" +
"&$orderby=Title")
.then(function (response) {
// Add the response data to the ViewModel
vm.items = response.data.value;
})
.catch(function (response) {
vm.message = "The list of documents could not be retrieved";
console.log("error");
});
Now here’s the view that renders the author’s name. Notice that the person’s attributes are properties within the person object (Author in this case…)
<div class="row site-grid-row"
ng-repeat="item in vm.items">
<div class="col-xs-12 col-sm-7 col-md-6 col-lg-6">
{{item.Title}}
</div>
<div class="hidden-xs hidden-sm col-md-3 col-lg-3">
{{item.Author.Title}}
</div>
<div class="hidden-xs col-sm-5 col-md-3 col-lg-3">
{{item.Modified | date : 'medium' : '-0500'}}
</div>
</div>
I hope someone else finds this helpful!