This sample program will fetch the record from a JSON file using angularjs. The code is very simple and easy to use.
My email address are the following jakerpomperada@gmail.com and jakerpomperada@yahoo.com.
My mobile number here in the Philippines is 09173084360.
Thank you.
Sample Program Output
Program Listing
index.php
<html ng-app="StudentApp">
<head>
<meta charset="utf-8">
<title>AngularJS JSON Fetching Student Records</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
var countryApp = angular.module('StudentApp', []);
countryApp.controller('StudentController', function ($scope, $http){
$http.get('students.json').success(function(data) {
$scope.records = data;
});
});
</script>
<style>
h2 {
text-align:center;
color:blue;
position: relative;
top: 40px;
}
table.center {
position: relative;
top: 60px;
width:80%;
font-weight:bold;
margin-left:15%;
margin-right:15%;
}
</style>
</head>
<body ng-controller="StudentController">
<h2>AngularJS JSON Fetching Student Records</h2>
<table class="center" border="1">
<tr>
<th>Student Name</th>
<th>Course</th>
<th>Year Level</th>
<th>Address</th>
</tr>
<tr ng-repeat="students in records">
<td>{{students.name}}</td>
<td>{{students.course}}</td>
<td>{{students.year_level}}</td>
<td>{{students.address}}</td>
</tr>
</table>
</body>
</html>
students.json
[
{
"name": "James Dean",
"course": "BSIT",
"year_level": "First Year",
"address": "One Gateway USA"
},
{
"name": "Linda Lee",
"course": "BSMA",
"year_level": "Second Year",
"address": "#12345 Microsoft Way USA"
},
{
"name": "Bryan Adams",
"course": "MSIM",
"year_level": "Third Year",
"address": "Spartan Road USA"
},
{
"name": "Jake Pomperada",
"course": "BSCS",
"year_level": "Fourth Year",
"address": "Purok Pag-asa, Barangay Alijis, Bacolod City Negros Occidental"
},
{
"name": "Jacob Samuel Pomperada",
"course": "BSChe",
"year_level": "Second Year",
"address": "Purok Pag-asa, Barangay Alijis, Bacolod City Negros Occidental"
}
]
