I am trying to create a small angular that takes a json file and displays the data on an html page. However I am getting the following error: POST bookmarks/data/bookmarks.json 405 (Method Not Allowed).
Here is my code:
<html lang="en" ng-app="bookmarksApp" id="ng-app">
<head>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body ng-controller="BookmarkController as bookmarksCtrl">
<article class="main-content" role="main">
<section class="row">
<div class="content">
<div class="bookmarks-list">
<h1>Christine's Bookmarks</h1>
<ul>
<li ng-repeat="bookmark in bookmarksCtrl.bookmarks" class="">
<h3>{{bookmark.name}}</h3>
<a href="{{bookmark.url}}">{{bookmark.url}}</a>
</li>
</ul>
</div>
</div>
</section>
</article>
<script type="text/javascript" src="scripts/angular.min.js"></script>
<script type="text/javascript" src="scripts/main.js"></script>
</body>
</html>
and my angular code:
(function() {
var app = angular.module('bookmarksApp', []);
app.controller('BookmarkController', function($scope, $http) {
$http({ method: 'POST', url: 'data/bookmarks.json' }).success(function (data) {
console.log('hello');
$scope.bookmarks = data; // response data
}).
error(function (data) {
console.log(data);
});
});
})();
Any ideas where I am going wrong? Thanks.
I am trying to create a small angular that takes a json file and displays the data on an html page. However I am getting the following error: POST bookmarks/data/bookmarks.json 405 (Method Not Allowed).
Here is my code:
<html lang="en" ng-app="bookmarksApp" id="ng-app">
<head>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body ng-controller="BookmarkController as bookmarksCtrl">
<article class="main-content" role="main">
<section class="row">
<div class="content">
<div class="bookmarks-list">
<h1>Christine's Bookmarks</h1>
<ul>
<li ng-repeat="bookmark in bookmarksCtrl.bookmarks" class="">
<h3>{{bookmark.name}}</h3>
<a href="{{bookmark.url}}">{{bookmark.url}}</a>
</li>
</ul>
</div>
</div>
</section>
</article>
<script type="text/javascript" src="scripts/angular.min.js"></script>
<script type="text/javascript" src="scripts/main.js"></script>
</body>
</html>
and my angular code:
(function() {
var app = angular.module('bookmarksApp', []);
app.controller('BookmarkController', function($scope, $http) {
$http({ method: 'POST', url: 'data/bookmarks.json' }).success(function (data) {
console.log('hello');
$scope.bookmarks = data; // response data
}).
error(function (data) {
console.log(data);
});
});
})();
Any ideas where I am going wrong? Thanks.
Share Improve this question asked Jul 3, 2014 at 11:16 cm381cm381 1671 gold badge4 silver badges16 bronze badges 4-
why you have
bookmarksCtrl.bookmarksin ng-repeat not just bookmarks, i think there should be just bookmarks. – Mritunjay Commented Jul 3, 2014 at 11:20 - Try a "GET" instead of "POST"? since post is 405, get probably will work – Marvin Smit Commented Jul 3, 2014 at 11:21
- Also, as mentioned by Mritunjay. The ng-repeat works off the scope, not the controller instance. Remove your controller piece from the repeat. – Marvin Smit Commented Jul 3, 2014 at 11:22
- @Mritunjay I've made those two changes and this has got rid of the error and I can see the json data if I do console.log(data). However, it's still not showing the data when I'm binding it to the front end, any ideas? – cm381 Commented Jul 3, 2014 at 11:36
2 Answers
Reset to default 2Try to change the POST to GET.
Also fix the problem in ng-repeat
use
<li ng-repeat="bookmark in bookmarks" class="">
at the place of
<li ng-repeat="bookmark in bookmarksCtrl.bookmarks" class="">
If POST is not allowed try GET, if you have to use POST then you need to change backend to allow post requests
$http({ method: 'POST', url: 'data/bookmarks.json' }).success(function (data) {