After successfully reading a JSON file in my sample code, I encountered an issue when trying to update the JSON file. The error message "Failed to load resource: the server responded with a status of 405 (Method Not Allowed)" appeared, even though the data is available when checking the link by right-clicking. I'm unsure where I went wrong, so I would appreciate any help on this matter.
Here are the links for easy reference: https://i.sstatic.net/gVY3h.jpg Data Available at this location https://i.sstatic.net/yu9Bj.jpg
file.json
[
{"name":"English","value":true},
{"name":"Spanish","value":false},
{"name":"German", "value":false},
{"name":"Russian","value":false},
{"name":"Korean", "value":false}
]
// Code implementation
var app = angular.module('myApp', []);
app.service('JSONService', function($http){
return{
getJSON: function(){
return $http.get('file.json')
.then(function(response){
return response.data;
});
}
};
});
app.controller('myCtrl',['$scope', 'JSONService','$http', function( $scope, JSONService, $http) {
JSONService.getJSON().then(function(data){
$scope.languages = data;
});
//inputting json directly for this example
// $scope.languages = [
// {name:"English", value:true},
// {name:"Spanish", value:false},
// {name:"German", value:false},
// {name:"Russian", value:false},
// {name:"Korean", value:false}
// ];
$scope.save = function() {
// $http.post('file.json', $scope.languages).then(function(data) {
// $scope.msg = 'Data saved';
// });
$http({
url: 'file.json',
method: "POST",
data:$scope.languages,
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
});
};
}]);<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<form>
<div ng-repeat="lang in languages">// Displaying checkboxes for each language
<label>{{lang.name}}</label>
<input type="checkbox" min="0" max="4" ng-model="lang.value" >
</div>
<button ng-click="save()">Save</button> // Save button triggers save function
<p>{{msg}}</p> // Message displayed after saving data
</form>
</body>
</html>