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 as ctrl">
    <br>
    

    <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 ctrl.people ">
            <td>{{person.id}}</td>
            <td>{{person.firstName}}</td>
            <td>{{person.lastName}}</td>
            <td>{{person.status}}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <br><br>

    <div width="50px" class="form-group">
      <ui-select tagging ng-model="ctrl.selected" theme="bootstrap">
        <ui-select-match placeholder="Pick one...">{{$select.selected.value}}</ui-select-match>
        <ui-select-choices repeat="val in ctrl.values | filter: $select.search track by val.value">
          <div ng-bind="val.value | highlight: $select.search"></div>
        </ui-select-choices>
      </ui-select>
    </div>
    <br>
       <div width="50px">
      <ui-select tagging ng-model="ctrl.selectedName" theme="bootstrap">
        <ui-select-match placeholder="Pick one...">{{$select.selected.value}}</ui-select-match>
        <ui-select-choices repeat="val in ctrl.nameValues | filter: $select.search track by val.value">
          <div ng-bind="val.value | highlight:...

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($http) {

    var vm = this;

    vm.people = [];
    vm.isLoaded = false;
    vm.values = [];   
 
      vm.people = [{
          id: 1,
          firstName: "John",
          lastName: "Rein",
          status: 'available'
        },
        {
          id: 2,
          firstName: "David",
          lastName: "Gumry",
          status: 'not available'
        },
        {
          id: 2,
          firstName: "K",
          lastName: "S",
          status: 'pending'
        }
      ];

      vm.values = [...new Set(vm.people.map(obj => ({
        value: obj.status
      })))];
      
          vm.nameValues = [...new Set(vm.people.map(obj => ({
        value: obj.lastName
      })))];
    

    vm.selected = {
      key: null,
      value: null
    };
    
  })