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>
<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.4/angular-sanitize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.min.css">
<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>
  
  <div ng-app="app" ng-controller="PeopleCtrl" width="50px">
    <ui-select tagging ng-model="selected" theme="bootstrap">
        <ui-select-match placeholder="Pick one...">{{$select.selected.value}}</ui-select-match>
        <ui-select-choices repeat="val in values | filter: $select.search track by val.value">
            <div ng-bind="val.value | highlight: $select.search"></div>
        </ui-select-choices>
        
    </ui-select>
</div>

CSS

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

JavaScript

angular.module('myApp', ['ui.select'])

.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
        });
    };
    
    $scope.isLoaded = false;
    $scope.values = [{
        'key': 1,
        'value': 'available'
    }, {
        'key': 24,
        'value': 'not available'
    }];
    $scope.selected;
    
    var mockDataForThisTest = "json=" + encodeURI(JSON.stringify([
    {
        id: 1,
        firstName: "John",
        lastName: "Rein",
        status: 'available'
    },
    {
        id: 2,
        firstName: "David",
        lastName: "Gumry",
         status: 'not available'
    }
  ]));
})