Consume SharePoint 2013 REST API using AngularJS

The code below shows you how to invoke a SharePoint 2013 REST API. Understand this code is listed just for you to understand how to invoke REST API. In the real world, you would want to separate the script file into its own .js file. Recommended practice is to have an individual file for each controller. Also, http service is asynchronous here, so should always have on success and on failure events.

I have a list called Customers in SP 2013, so the REST API call would look something like this:

http://webapp/_api/web/lists/getByTitle(‘Customers’)/items?$select=CustomerID1,CustomerName,CustomerAddress,CustomerState,CustomerCountry

Also, to note is that I am getting back the REST API output as JSON, with the following statement: application/json; odata=verbose

If you examine JSON output from SP, the informatio you need resides within the details structure, so that is the reason you see that I am storing my customer data by accessing <dataoutputfromJSON>.d.details

Here is the complete HTML file to access SharePoint 2013 list via REST API using AngularJS

<head>

<title>SharePoint REST API Call </title>

var tkCustomerApp= angular.module(‘tkCustomerApp’, []);

tkCustomerApp.controller(‘CustomerCtrl’, function ($scope, $http){

$http({headers: { “Accept”: “application/json; odata=verbose” }, method: ‘GET’, url:”http://tksp15:90/_api/web/lists/getByTitle(‘Customers’)/items?$select=CustomerID1,CustomerName,CustomerAddress,CustomerState,CustomerCountry”})

.success(function(data) {

$scope.customers = data.d.results;

});

</script>

</head>

<div> Search:<input ng-model=”query” type=”text”/> </div>

<br />

<table>

<tr>

<th>Customer ID</th>

<th>Customer Name</th>

<th>Customer Address</th>

<th>Customer State</th>

<th>Customer Country</th>

</tr>

<td>{{cust.CustomerID1}}</td>

<td>{{cust.CustomerName}}</td>

<td>{{cust.CustomerAddress}}</td>

<td>{{cust.CustomerState}}</td>

<td>{{cust.CustomerCountry}}</td>

</tr>

</table>

</body>

</html>