Get data from SharePoint Online list using Rest api & Angular JS

Advertisement

In this article you can see how to bind data from list using Rest API and Angular JS.

We are having a list with name "InfoList”, in the page we added the script editor and added the below code.

What is difference between AngularJS and Angular 2
<style>
table, td, th {
    border: 1px solid blue;
}

th {
    background-color: Green;
    color: white;
}
</style>
<script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script>
   
    var myAngApp = angular.module('SharePointAngApp', []);
    myAngApp.controller('spCustomerController', function ($scope, $http) {
        $http({
            method: 'GET',
            url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('InfoList')/items?$select=Title,Employee,Company",
            headers: { "Accept": "application/json;odata=verbose" }
        }).success(function (data, status, headers, config) {
            $scope.customers = data.d.results;
        }).error(function (data, status, headers, config) {
      
        });
    });
   

</script>

<h1> Angular JS SharePoint REST API !!</h1>

<div ng-app="SharePointAngApp" class="row">
    <div ng-controller="spCustomerController" class="span10">
        <table class="table table-condensed table-hover">
            <tr>
                <th>Title</th>
                <th>Employee</th>
                <th>Company</th>
              
            </tr>
            <tr ng-repeat="customer in customers">
                <td>{{customer.Title}}</td>
                <td>{{customer.Employee}}</td>
                <td>{{customer.Company}}</td>
                </tr>
        </table>
    </div>
</div>

      
        });
    });
     
</script>

Advertisements

SHARE

LakshmiTulasi & PhaniKumar

• 
• 
• 
• 
•