I am in the process of developing my personal website where I want to be able to update content easily without having to mess with the HTML code. My approach involves loading and updating a JSON file to achieve this, however, I am currently struggling with loading JSON data onto a scope variable.
HTML
<!doctype html>
<html>
<head>
<script src="angular.min.js" type="text/javascript"></script>
<script src="maincontroller.js" type="text/javascript"></script>
</head>
<body>
<div ng-app="mainApp" ng-controller="mainController">
<div id="content">
<div ng-repeat="content in contents">
<h2>{{content.heading}}</h2>
<p>{{content.description}}</h2>
</div>
</div>
</div>
</body>
</html>maincontroller.js
var myapp = angular.module('mainApp', []);
myapp.controller('mainController',function($scope,$http){
$scope.contents = null;
$http.get('mainContent.json')
.success(function(data) {
$scope.contents=data;
})
.error(function(data,status,error,config){
$scope.contents = [{heading:"Error",description:"Could not load json data"}];
});
//$scope.contents = [{heading:"Content heading", description:"The actual content"}];
//Just a placeholder. All web content will be in this format
});
This is a snippet of the structure of the JSON file:
[
{"heading":"MyHeading","description":"myDescription"},
]
I attempted to follow a suggested solution from this thread on Stack Overflow but encountered issues when trying to load the JSON file stored within the same folder. Instead of loading the content, the error handling function is triggered displaying "Error: Cannot load JSON data."
Can someone help me understand what mistake I might be making?
UPDATE: When I uploaded the same code to Plunker, it worked perfectly fine. The problem seems to be occurring only on my local machine.