Load JSON data and display in HTML table using Angular

Less than 15 lines of code you can use Angular.js to load JSON data and display on HTML grid.

HTML

<div ng-app="myApp">
    <div ng-controller="TopApps">
        <table ng-init="loadTopApps()" class="jqst">
            <tr>
                <th>Description</th>
                <th>Usage</th>
                <th>% Usage</th>
            </tr>
            <tr ng-repeat="application in topApps">
                <td>{{application.description}}</td>
                <td>{{application.usage}}</td>
                <td>{{application.percentUsage}}</td>
            </tr>
        </table>
    </div>
</div>

CSS

/* Table*/
 .jqst {
    background-color: #ffffff;
    border-collapse: collapse;
    font-family: Helvetica, Verdana, sans-serif;
    font-weight: 300;
    width: 100%;
    font-size: 12px;
    background-clip: padding-box;
}
.jqst > thead {
    /** DEFINE toolbar styles here **/
}
.jqst > thead .layout td {
    font-weight: 500;
}
.jqst > thead td {
    border: 1px solid #bbbbbb;
    padding: 4px;
    background-color: #ddd;
    color: #333333;
    padding-top: 6px;
    padding-bottom: 6px;
}
.jqst > thead tr.title > td {
    text-align: center;
}
.jqst > thead tr.toolbar td {
    background-color: #fefefe;
    padding: 0px;
}
.jqst > thead tr.toolbar input.filter {
    width: 200px;
    border-radius: 12px;
    border: 1px solid #bbbbbb;
    font-size: 12px;
    font-color: #666;
    padding: 2px;
    margin: 4px;
    vertical-align: top;
}
.jqst > thead tr.toolbar .menu {
    display: inline-block;
    position: absolute;
    top: 85px;
    color: #ffffff;
    padding: 8px;
    font-size: 16px;
    width: auto;
    background-color: #2ac5eb;
    text-align: left;
}
.jqst > thead tr.toolbar .hover {
    background-color: rgba(0, 0, 0, 0.05);
    cursor: pointer;
}
.jqst > thead tr.toolbar .button {
    vertical-align: top;
    display: inline-block;
    border-right: 1px solid #bbbbbb;
    width: 30px;
    text-align: center;
    padding: 2px;
    height: 100%;
}
.jqst > tbody > tr {
    border-bottom: 1px solid #e5e5e5;
    /* HOVER */
    /* EDITING STUFF */
}
.jqst > tbody > tr:nth-last-child(1) {
    border-bottom: 1px solid #bbbbbb;
}
.jqst > tbody > tr:nth-child(odd) {
    background-color: #fbfbfb;
}
.jqst > tbody > tr:nth-child(even) {
    background-color: #fefefe;
}
.jqst > tbody > tr .jqst-hover-row {
    background-color: #D0EDF2;
}
.jqst > tbody > tr .jqst-hover-row td.editable {
    background-color: transparent;
}
.jqst > tbody > tr .editable {
    font-weight: bold;
    cursor: pointer;
}
.jqst > tbody td {
    /* border-right: 1px solid...

JavaScript

var mockTopApps = "json=" + encodeURI(JSON.stringify([{
    "description": "Misc. Web",
        "usage": "1.49 TB",
        "percentUsage": "15%"
}, {
    "description": "YouTube",
        "usage": "1.30TB",
        "percentUsage": "14%"
}, {
    "description": "Adobe Flash",
        "usage": "1.25 TB",
        "percentUsage": "13%"
}, {
    "description": "CDNs",
        "usage": "600 TB",
        "percentUsage": "10%"
}, {
    "description": "Netflix",
        "usage": "500 GB",
        "percentUsage": "9%"
}, {
    "description": "Skype",
        "usage": "400 GB",
        "percentUsage": "8%"
}, {
    "description": "Non-web",
        "usage": "300 GB",
        "percentUsage": "7%"
}, {
    "description": "Facebook",
        "usage": "200 GB",
        "percentUsage": "5%"
}, {
    "description": "Dailymotion",
        "usage": "100 GB",
        "percentUsage": "4%"
}, {
    "description": "Misc. Video",
        "usage": "50 GB",
        "percentUsage": "662%"
}]));



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


function TopApps($scope, $http) {

    $scope.topApps = [];

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

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

    };
}