Menu
I'm creating a personal website where I can keep updating content without having to manipulate the HTML. I'm trying to achieve this by simply loading and updating a JSON file. But right now, I'm having trouble 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 what the JSON file looks like
[
{"heading":"MyHeading","description":"myDescription"},
]
I actually tried following the solution given here, but it's not loading the JSON file stored in the same folder. The output I get is from the error handling function which is saying Error: Cannot load JSON data as mentioned.
What am I doing wrong?
EDIT: I put the same code on plunker and it works fine. It's just not working on my local machine.
272
Modified Your Method Use this and Check output.
var myapp=angular.module('mainApp',[]);
myapp.controller('mainController',function($scope,$http){
$scope.content = null;
$http.get('urlpath'}).
success(function(data, status, headers, config) {
$scope.contents=data;
}).error(function(data, status, headers, config) {
});
});
or Another Good Practice I see
Use Factory Service Method:-
angular.module('mainApp').factory('Myservice', function($http){
return {
getdata: function(){
return $http.get('url'); // You Have to give Correct Url either Local path or api etc
}
};
});
Inject above service to Controller
Controller :-
angular.module('mainApp',[]).controller('mainController',function($scope,Myservice){
$scope.content = null;
Myservice.getdata().success(function (data){
alert('Success');
$scope.content=data[0]; // as per emilySmitley Answer which is Working Good
});
});
Let Me Know if You have any Questions . Good Luck
139
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
