AngularJS:JSON data display

Parse a JSON object and display data inside view template.

by santhosh lanka

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
<h3 class="header text-info">Display JSON data in a view template</h3>
<div ng-app="myApp" ng-controller="AppCtrl">
    <h2>Meta info</h2>
    <div class="row-fluid">
        Limit# {{data.meta.limit}}<br />
        Offset# {{data.meta.offset}}<br />
        Limit# {{data.meta.next}}<br />
        Previoust# {{data.meta.previous}}<br />
        Total count# {{data.meta.total_count}}
    </div>
    <h2>Data Objects</h2>
    <div class="row-fluid">
        <table class="table table-hover table-striped table-condensed">
            <thead>
                <tr>
                    <th>#</th>
                    <th>GenreType</th>
                    <th>URI</th>                
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="object in data.objects">
                    <td>{{object.id}}</td>
                    <td>{{object.GenreType}}</td>
                    <td>{{object.resource_uri}}</td>                
                </tr>            
            </tbody>
        </table>
    </div>
    <pre>Data = {{data | json}}</pre>
</div>

JavaScript

'use strict';

var app = angular.module('myApp', []);

app.controller('AppCtrl', function($scope){
    $scope.data = {
	"meta": {"limit": 20, "next": null, "offset": 0, "previous": null, "total_count": 3}, 
	"PROPERTY_KEY": [
  			{"roles": "LLD, CPD, HLD"},
        {"roles" : "LLD, CPD"}
     ]
};

});