Post
Ask Question

Read JSON and Display using AngularJS Expression

 
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
  1. [{    
  2.    "id":1,    
  3.    "name":"Employee A",    
  4.    "gender":"Male",    
  5.    "salary":10000    
  6.  },{    
  7.    "id":2,    
  8.    "name":"Employee A",    
  9.    "gender":"Female",    
  10.    "salary":20000    
  11.  },{    
  12.    "id":3,    
  13.    "name":"Employee C",    
  14.    "gender":"Male",    
  15.    "salary":30000    
  16.  },{    
  17.    "id":4,    
  18.    "name":"Employee D",    
  19.    "gender":"Female",    
  20.    "salary":40000    
  21.  },{    
  22.    "id":5,    
  23.    "name":"Employee E",    
  24.    "gender":"Male",    
  25.    "salary":50000    
  26.  }]    
Now create a controller that can access data from Employee.json file. This is my controller, named employeeController.js
 
employeeController.js
  1. var employeeAppModule = angular.module("employeeApp", []);    
  2.  employeeAppModule.controller("employeeCtrl", function ($scope,$http) {    
  3.    $http.get('Employee.json')    
  4.    .success(function(data){    
  5.      $scope.employees = data;    
  6.    })    
  7.    .error(function(data,status){    
  8.      console.error('Fail to load data', status, data);    
  9.      $scope.employees = { };     
  10.    });    
  11.  });    
 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
  1. <!DOCTYPE html>    
  2.  <html>    
  3.  <head>    
  4.    <title>Employee Details</title>    
  5.    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>    
  6.    <script type="text/javascript" src="employeeController.js"></script>    
  7.  </head>    
  8.  <body ng-app="employeeApp">    
  9.    <div align="center"><p>Employee Information</p></div>    
  10.    <div ng-controller="employeeCtrl">    
  11.      <table align="center" border="1">    
  12.        <tr>    
  13.          <th>ID</th>    
  14.          <th>Name</th>    
  15.          <th>Gender</th>    
  16.          <th>Salary</th>    
  17.          <th>Bonus</th>    
  18.          <th>Total Salary</th>    
  19.        </tr>    
  20.        <tr ng-repeat="employee in employees">    
  21.          <td>{{employee.id}}</td>    
  22.          <td>{{employee.name}}</td>    
  23.          <td>{{employee.gender}}</td>    
  24.          <td>{{employee.salary}}</td>    
  25.          <td>{{employee.bonus}}</td>    
  26.          <td>{{(employee.salary)--(employee.bonus)}}</td>    
  27.        </tr>    
  28.      </table>    
  29.    </div>    
  30.  </body>    
  31.  </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 :
  •  npm install -g http-server
after installing this package run your local server by following command:
  • http-server -c-1
It will start local http server, then go to browser and go to following url:
  • http://localhost:8080/
You will see output look like this:
 
 
Conclusion
 
You may notice that concatenation operation which will be performed by AngularJS Expression. I hope this will be helpful. Thank you for reading.
Next Recommended Reading How To Parse And Stringify JSON Data Using Angular