CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scopeangular-ui-routerangularjs-ng-repeat
Soren Sindgart
Soren Sindgart

Reputation: 11

Not displaying my wines with services

I have run into a problem with my Angular Wine App. The problem is that I have had everything work in a single controller, now I want to split them up and I have done so, but my data will not be displayed. Therefore I am looking for some help.

I get all my objects as I should and everything seems fine, except for the data not showing. Can anybody help?

The HTML:

<table class="table table-striped">
    <thead>
    <tr>
        <th>Name</th>
        <th>Description</th>
        <th>Year</th>
        <th>Price</th>
        <th>&nbsp;</th>
    </tr>
    </thead>



<tbody>
    <tr ng-repeat="wine in wines">
        <td><img ng-src="{{wine.Vineyard.ImageUrl}}" style="width: 100px; margin: 5px;" />{{wine.Name}}</td>
        <td style="width: 250px;">{{wine.Description}}</td>
        <td>{{wine.Vintage}}</td>
        <td>{{wine.PriceRetail | currency}}</td>
        <td>
            <button ng-click="selectWine(wine)" class="btn btn-warning"><span class="glyphicon glyphicon-pencil"></span></button>
            <button ng-click="removeWine(wine)" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span></button>
            <button ng-click="favWine(wine)" class="btn btn-info"><span class="glyphicon glyphicon-star"></span></button>
            <button ng-click="detailWine(wine)" class="btn btn-default"><span class="glyphicon glyphicon-zoom-in"></span></button>
        </td>
    </tr>
</tbody>

And the AngularJS File

WineApp.controller("ListController", function($scope, $http, winedata) {
$scope.wines = winedata.getWines();

$scope.removeWine = function(wine) {
    // console.log("remove wine");

    var index = $scope.wines.indexOf(wine);
    // console.log(index);

    $scope.wines.splice(index, 1)
}

$scope.selectWine = function(wine) {
    $scope.wine = wine;
}

$scope.updateWine = function(wine) {
    // var editWine = {
    //   Name: $scope.wine.Name,
    //   Description: $scope.wine.Description,
    //   Vintage: $scope.wine.Vintage,
    //   PriceRetail: $scope.wine.PriceRetail
    // }
    $scope.wine = wine;
    // console.log(wine);
    // $scope.wines.extend(editWine);
    alert("Updated!");
    // $scope.wine.Name = "";
    // $scope.wine.Description = "";
    // $scope.wine.Vintage = "";
    // $scope.wine.PriceRetail = "";
}
});

The Service it is supposed to get the data from

WineApp.service('winedata', function($http) {

this.getWines = function() {
$http.get("http://services.wine.com/api/beta2/service.svc/json/catalog?apikey=2aef2f70e044ebcb683f46df93ac4eb9&size=100")
.success(function(response) {
  //  alert(response);
  console.log(response.Products.List);

  wines = response.Products.List;
})
}


this.searchForWine = function(Name) {
        $http.get("http://services.wine.com/api/beta2/service.svc/json/catalog?apikey=2aef2f70e044ebcb683f46df93ac4eb9&size=100&search=" + Name)
        .success(function(response) {
            //  alert(response);
            console.log(response.Products.List);

            wines = response.Products.List;
        })
}
//  wines.favoriteWine = [];
});

Upvotes: 1

Views: 45

Answers (1)

Luca Argenziano
Luca Argenziano

Reputation: 144

The function getWine() from your winedata service doesn't seem to return anything. Try to replace

wines = response.Products.Lists;

with

return response.Products.Lists;

and you should be fine.

Upvotes: 1

Related Questions