AngularJS使用PUT将新数据(喜欢/不喜欢)推送/更新到API

我正在尝试创建一个计算啤酒喜欢的应用程序！这将更新存储啤酒的 API，进而使用 PUT 方法更新 API 和 angularJS 视图上的点赞数。每次单击类似内容时，我都能够使视图正常工作。我不确定为什么我的 PUT 方法继续返回 404 并且不会更新 API。请参阅下面的代码以了解我的 put 方法。我还为此包含了我的JS和HTML。我觉得我很接近，但无法弄清楚如何让"喜欢"在 API 上更新。提前谢谢你！！我想我正在将不正确的数据传递给 PUT 方法。

HTML：

<div ng-app="beerApp" ng-controller="BeerController" class="jumbotron">
<div class="all-beer">
<div class="single-beer" ng-repeat="beer in allBeer">
<div>{{beer.name}}</div>
<div>{{beer.likes}}</div>
<button ng-click="decrease(beer)">X</button>
<button ng-click="increase(beer)">3</button>
</div>
</div>
</div>

JS：

angular.module('beerApp', []).controller('BeerController', function($scope, $http) {
$scope.allBeer = [];
$scope.beerSum = function() {
$http({
method: 'GET',
url: /api/beers
}).
then( function(response) {
if(typeof response === 'object') {
var dataArr = response.data;
for (var i = 0; i < dataArr.length; i++) {
var beer = dataArr[i];
$scope.allBeer.push(beer);
}
} else {
return;
}
}, function(error) {
console.log('i am an error', error);
})
};
$scope.beerSum();
$scope.increase = function(beer){
var newLikes = beer.likes++;
$http({
method: 'PUT',
url: '/api/beer/',
data: JSON.stringify($scope.allBeer.likes),
}).then(function successCallback(response) {
console.log("Updated!");
}, function errorCallback(response) {
console.log("not updated")
});
};

首先，您缺少http api的一些语法。其次，您正在调用不存在的数组上的属性。第三，由于您拥有的逻辑，您的 api 将无法工作。你有一系列啤酒，你想增加对单一啤酒的喜欢。在服务器上创建一个接受啤酒的方法，服务器将获取该啤酒并将其喜欢数增加 1，然后保存到数据库或其他什么。

根据您使用的服务器，您有两个选择。您只需在/api/beers定义命令，并将服务器配置为接受对象并将该对象 ID 用于服务器更新。如果是这种情况，我建议创建此端点，/api/beers/update并使其成为 POST，并将对象传递给它，然后在此命令中执行所有更新逻辑。

或者例如，Microsoft Web API 的默认放置(更新(终结点如下所示，public void Update(int id, object data){}url 为/api/beers/{id}。要使用此方法，您需要更改我编写的updateLikes方法的代码。见下文：

$scope.updateLikes = function(beer, likeCount){
beer.likes+= likeCount;
$http({
method: 'PUT',
url: '/api/beer/' + beer.id,
data: JSON.stringify(beer),
}).then(function successCallback(response) {
console.log("Updated!");
//Trigger reload of data
$scope.beerSum();
}, function errorCallback(response) {
console.log("not updated")
});
};

额外帮助

如果您仍然遇到问题并且在 GitHub 环境中工作，我很乐意更直接地帮助您编写代码。除此之外，我发布的答案是你的问题，并且我认为这是AngularJS的良好编码实践。除了一个小的例外，代码对读取的行进行了更改，beer.likes += likeCount因为这也会更新原始啤酒对象。我想这是偏好，但如果您需要更多帮助，请与我联系。

.JS：

angular.module('beerApp', []).controller('BeerController', function($scope, $http) {
$scope.allBeer = [];
$scope.beerSum = function() {
$http({
method: 'GET',
url: '/api/beers' //<-- Added string opening and closing tags
}).
then( function(response) {
if(typeof response === 'object') {
var dataArr = response.data;
for (var i = 0; i < dataArr.length; i++) {
var beer = dataArr[i];
$scope.allBeer.push(beer);
}
} else {
return;
}
}, function(error) {
console.log('i am an error', error);
})
};
$scope.beerSum();
$scope.increase = function(beer){
var newLikes = beer.likes++;
//Your code
$http({
method: 'PUT',
url: '/api/beer/', //<-- closing 
data: JSON.stringify($scope.allBeer.likes), //<-- Where does likes come from? $scope.allBeer is an array of beer but the array itself doesn't have a property called likes.
}).then(function successCallback(response) {
console.log("Updated!");
}, function errorCallback(response) {
console.log("not updated")
});
//End your code
//My Code
beer.likes+=1; //<-- My bad I fixed this.
$http({
method: 'PUT',
url: '/api/beer/', //<-- closing 
data: JSON.stringify(beer), //<-- The object you passed into the function
}).then(function successCallback(response) {
console.log("Updated!");
}, function errorCallback(response) {
console.log("not updated")
});
//End my code
};

可能出现的问题

您的 api 不适用于 put，在这种情况下，这个问题不正确。
1. 程序内部还有其他问题，但从这一点开始，我认为你正在发现你的 API 有问题，不管那是什么。

angular.module('beerApp', []).controller('BeerController', function($scope, $http) {
$scope.allBeer = [];
$scope.beerSum = function() {
$scope.allBeer.push({
"name": "Miller Lite",
"likes": 0
});
$http({
method: 'GET',
url: '/api/beers' //<-- Added string opening and closing tags
}).
then( function(response) {
if(typeof response === 'object') {
var dataArr = response.data;
for (var i = 0; i < dataArr.length; i++) {
var beer = dataArr[i];
$scope.allBeer.push(beer);
}
}
}, function(error) {
console.log('i am an error', error);
})
};
$scope.beerSum();
$scope.updateLikes = function(beer, likeCount){
beer.likes+= likeCount;
$http({
method: 'PUT',
url: '/api/beer/',
data: JSON.stringify(beer),
}).then(function successCallback(response) {
console.log("Updated!");
//Trigger reload of data
$scope.beerSum();
}, function errorCallback(response) {
console.log("not updated")
});
};
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-app="beerApp" ng-controller="BeerController" class="jumbotron">
<h1>Beers on Tap</h1>
<div class="all-beer">
<div class="single-beer" ng-repeat="beer in allBeer">
<div>{{beer.name}}</div>
<div>{{beer.likes}}</div>
<button ng-click="updateLikes(beer, -1)">Down Vote</button>
<button ng-click="updateLikes(beer, 1)">Up Vote</button>
</div>
</div>
</div>
</body>
</html>

额外帮助

.JS：

可能出现的问题

相关内容

最新更新

热门标签：