Currently, I am in the process of developing an application that retrieves a list of Beers from an API. Each beer in the JSON response contains the fields {name: "beer", id: number, likes: number}.
However, I am facing a challenge while attempting to add a new beer to the existing list. For this operation, only the name and likes fields are necessary to POST the new beer to the API. The ID will be automatically generated.
The code snippet is as shown below:
HTML
<div ng-app="beerApp" ng-controller="BeerController" class="jumbotron">
<div class="all-beer js-beer-slider">
<div class="single-beer" ng-repeat="beer in allBeer">
<div>{{beer.name}}</div>
<div>Likes: {{beer.likes}}</div>
<button ng-click="updateLikes(beer, -1)">X</button>
<button ng-click="updateLikes(beer, 1)"><\3</button>
<br>
<button class="btn">Add Beer</button>
<br>
<input type="text" ng-model="beerToAdd.name">
<button class="btn2" ng-click="addBeer(beerToAdd)">Submit</button>
</div>
</div>
</div>
JS
$scope.addBeer = function (check) {
var likes = {'likes': '0'}
$scope.allBeer.push(likes);
console.log(check);
};
It is evident that this is not the entirety of the JS code I have, but this is what I am dealing with at present. Upon implementation, the name field is successfully populated, and its value is what is returned as "check" in the console. However, I am struggling to include the default value of likes (0) in the array so that the new item can be pushed to the API in the format {name: "whatever from the input field", likes: 0}.
Since I am relatively new to AngularJS, I am seeking guidance on the next steps. Any assistance would be greatly appreciated.