Read JSON and Display using AngularJS Expression

Keyur Ramoliya
8y
14.4k
0
0

Blog

Angular Read.rar

What is Angular Expression?

According to angularjs.org Angular Expression can be defined by the JavaScript, like code snippets that are placed in between the Two-Way binding(interpolation binding), but it can also be used directly in directive attributes.

Example

Suppose we have a file named Employee.json which contains simple json structure that contains employee information like id,name,gender,salary etc.

Employee.json

[{
"id":1,
"name":"Employee A",
"gender":"Male",
"salary":10000
},{
"id":2,
"name":"Employee A",
"gender":"Female",
"salary":20000
},{
"id":3,
"name":"Employee C",
"gender":"Male",
"salary":30000
},{
"id":4,
"name":"Employee D",
"gender":"Female",
"salary":40000
},{
"id":5,
"name":"Employee E",
"gender":"Male",
"salary":50000
}]

Now create a controller that can access data from Employee.json file. This is my controller, named employeeController.js

employeeController.js

var employeeAppModule = angular.module("employeeApp", []);
employeeAppModule.controller("employeeCtrl", function ($scope,$http) {
$http.get('Employee.json')
.success(function(data){
$scope.employees = data;
})
.error(function(data,status){
console.error('Fail to load data', status, data);
$scope.employees = { };
});
});

At first I created employeeAppModule which contains a simple controller named employeeCtrl. Next, To read data from Empployee.json file I used $http.get function which returns either a success or error status. Here, $scope.emplyees carries data from controller to our html page, i.e. to angular app.

Now, This is my Index.html page which displays all the data in a table format.

Index.html

<!DOCTYPE html>
<html>
<head>
<title>Employee Details</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script type="text/javascript" src="employeeController.js"></script>
</head>
<body ng-app="employeeApp">
<div align="center"><p>Employee Information</p></div>
<div ng-controller="employeeCtrl">
<table align="center" border="1">
<tr>
<th>ID</th>
<th>Name</th>
<th>Gender</th>
<th>Salary</th>
<th>Bonus</th>
<th>Total Salary</th>
</tr>
<tr ng-repeat="employee in employees">
<td>{{employee.id}}</td>
<td>{{employee.name}}</td>
<td>{{employee.gender}}</td>
<td>{{employee.salary}}</td>
<td>{{employee.bonus}}</td>
<td>{{(employee.salary)--(employee.bonus)}}</td>
</tr>
</table>
</div>
</body>
</html>

Here, (employee.salary)--(employee.bonus) acts like (employee.salary) + (employee.bonus) and angular treated '+' as concatenation operator and perform sum of salary and bonus of employees.

While running this application if you get an error like "Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource." then go to your project's root directory and install http-server node package using this command :