AngularJS:JSON data display

Parse a JSON object and display data inside view template.

by aman1981

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.4/angular.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.8.3/select.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.8.3/select.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-sanitize.js"></script>
<div ng-app="myApp">
  <div ng-controller="PeopleCtrl">
  <br>
    <p> Click <a ng-click="loadPeople()">here</a> to load data.</p>
    
    <h2>Data</h2>
    <div class="row-fluid">
      <table class="table table-hover table-striped table-condensed">
        <thead>
          <tr>
            <th>Id</th>
            <th>First Name</th>
            <th>Last Name</th>
             <th>Status</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="person in people">
            <td>{{person.id}}</td>
            <td>{{person.firstName}}</td>
            <td>{{person.lastName}}</td>
            <td>{{person.status}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  
  <br><br>

CSS

table {
  border: 1px solid #666;   
    width: 100%;
}
th {
  background: #f8f8f8; 
  font-weight: bold;    
    padding: 2px;
}

JavaScript

angular.module('myApp', [])

.controller("PeopleCtrl", function ($scope, $http) {

    $scope.people = [];

    $scope.loadPeople = function() {
        var httpRequest = $http({
            method: 'POST',
            url: '/echo/json/',
            data:  mockDataForThisTest

        }).success(function(data, status) {
            $scope.people = data
        });
    };
    

    
    
    var mockDataForThisTest = "json=" + encodeURI(JSON.stringify([
    {
        id: 1,
        firstName: "John",
        lastName: "Rein",
        status: 'available'
    },
    {
        id: 2,
        firstName: "David",
        lastName: "Gumry",
         status: 'not available'
    }
  ]));
})