Get Sharepoint Items And Customization Search Including Lookup And Person/Group Fileds Using RestAPI And AngularJS

Aim

Using Rest API With AngularJS, get SharePoint List Items and customization of search with Text, Lookup, and Person/Group type Fields.

Step 1

In my example, I have created two Lists. They are,

Product Sales
Phone

Step 2

In Phone Custom list, I created Title,Priority, and Demo single line text data type columns. And in second List i.e Produc Sales, I have created Product,Total_x0020_Sales,Sales_x0020_Target,SalesPerson,LPhone and SalesName.

Here,"LPhone" is Lookup Field link with our Phone Custom list field of Title.
"SalesName" is person/Group filed type and Show Field is FirstName.

Step 3

Create .js file file,

var spApp = angular
.module("spApp", [])
.controller("viewItemController", function ($scope, $http) {
var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('Product%20Sales')/items?$select=Product,Total_x0020_Sales,Sales_x0020_Target,SalesPerson,SalesName/FirstName,LPhone/Title&$expand=LPhone,SalesName";
$http(
{
method: "GET",
url: url,
headers: { "accept": "application/json;odata=verbose" }
}
).success(function (data, status, headers, config) {
var dataResults=data.d.results;
var item = data.d.results[1];
$scope.contacts = dataResults;
$scope.productItems = function(item)
{
if($scope.searchText==undefined)
{
return true;
}
else{
if((item.SalesPerson.toLowerCase().indexOf($scope.searchText.toLowerCase())!=-1)||(item.Product.toLowerCase().indexOf($scope.searchText.toLowerCase())!=-1))
{
return true;
}
}
return false;
}
}).error(function (data, status, headers, config) {
});
})

Step 5

Create .html File,

<html>
<head>
<script type="text/javascript" src="/SiteAssets/angular.min.js"></script>
<script type="text/javascript" src="/SiteAssets/angularGet.js"></script>
</head>
<body>
<h3>View Contacts</h3>
<hr/>
<div ng-app="spApp">
<div ng-controller="viewItemController"> <input type="text" placeholder="Product&SalesPerson" ng-model="searchText" /> <br/><br/>
<table>
<tr>
<th>Product</th>
<th>Total Sales</th>
<th>Sales Target</th>
<th>Sales Peron</th>
<th>LookUPFieldData</th>
<th>Person/GroupField</th>
</tr>
<tr ng-repeat="contact in contacts|filter:productItems">
<td>{{contact.Product}}</td>
<td>{{contact.Total_x0020_Sales}}</td>
<td>{{contact.Sales_x0020_Target}}</td>
<td>{{contact.SalesPerson}}</td>
<td>{{contact.LPhone.Title}}</td>
<td>{{contact.SalesName.FirstName}}</td>
</tr> <br /> </table>
</div>
<hr /> </body>
</html>

Step 6

Final result is given below.

Step 7

We are filtering Product or Sales Person Items here from data search result.