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!