I'm currently working on a simple AngularJS application that is supposed to extract data from a .json file. While my code doesn't show any errors upon running it, it fails to retrieve the JSON values as expected. I have a feeling that I may be overlooking something basic and trivial, but I can't seem to pinpoint the issue. The {{1+2}} function within the controller was just a test to ensure that the application is functioning correctly without any errors.
index.html
<!doctype html>
<html ng-app='phonebook'>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
<script type="text/javascript" src="js/phonebook.js"></script>
</head>
<body>
<div ng-controller="getPhonebook">
<ul>
<li ng-repeat="contact in phonebook.entries">
{{contact.name}} {{1+2}}
</li>
</ul>
</div>
</body>
</html>
js/phonebook.js
(function() {
var app = angular.module('phonebook', [ ]);
app.controller("getPhonebook", function($scope, $http) {
$http.get('js/phonebook.json').
success(function(data, status, headers, config) {
$scope.phonebook = data;
}).
error(function(data, status, headers, config) {
alert('error');
});
});
})();
js/phonebook.json
{
"entries" : [
{
"Name" : "Entry One",
"Department" : "Department A",
"Number" : [
{
"Name" : "Front Line",
"Phone" : "1234567890",
"Tieline" : "84543982"
},
{
"Name" : "Back Line",
"Phone" : "1243568790",
"Tieline" : "58472989"
}
],
"Hours" :
{
"Sunday" : false,
"Monday" : "9AM – 6PM",
"Tuesday" : "9AM – 6PM",
"Wednesday" : "9AM – 6PM",
"Thursday" : "9AM – 6PM",
"Friday" : "9AM – 6PM",
"Saturday" : "9AM – 6PM"
},
"Description" : "…"
}
]
}