Render json in table using AngularJs
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.angularjs.org/1.0.1/angular-1.0.1.min.js"></script>
<div ng-app="myApp">
<div ng-controller="PeopleCtrl">
<p> Click <a ng-click="loadPeople()">here</a> to load data.</p>
<table>
<tr>
<th>Name</th>
<th>Position</th>
<th>Research Interests</th>
</tr>
<tr ng-repeat="person in people">
<td>{{person.name}}</td>
<td>{{person.position}}</td>
<td>{{person.interests}}</td>
</tr>
</table>
</div>
</div>
CSS
table {
border: 1px solid #666;
width: 100%;
}
th {
background: #f8f8f8;
font-weight: bold;
padding: 2px;
}
JavaScript
var mockDataForThisTest = "json=" + encodeURI(JSON.stringify([
{
"name" : "Baron Peters",
"position" : "Professor",
"img" : "images/members/BP-11.jpg",
"department" : ["Department of Chemical Engineering", "Department of Chemistry and Biochemistry"],
"degrees": ["B.S. Chemical Engineering", "B.S. Mathematics", "PhD Chemical Engineering"],
"school" : ["University of Missouri - Columbia", "University of Missouri - Columbia", "Univeristy of California - Berkeley"],
"year" : [1999, 1999, 2004],
"interests" : "reaction rate theory, catalysis, nucleation and growth. In particular, we study crystal nucleation and growth from solution, catalysis on amorphous supports, and reactions in complex environments including polar solvents and interfaces."
},
{
"name" : "Christian Leitold",
"position" : "Post Doc",
"img" : "images/members/ChristianLeitold.jpg",
"department" : ["Department of Chemical Engineering"],
"degrees" : ["Diploma Physics", "PhD Computational Physics"],
"school" : ["University of Vienna", "University of Vienna"],
"year" : [2011, 2016],
"interests" : "nucleation and growth of crystals, reaction coordinates, order parameters for molecular simulations."
}
]));
var app = angular.module('myApp', []);
function PeopleCtrl($scope, $http) {
$scope.people = [];
$scope.loadPeople = function() {
var httpRequest = $http({
method: 'POST',
url: '/echo/json/',
data: mockDataForThisTest
}).success(function(data, status) {
$scope.people = data;
});
};
}