$scope array not holding value for ng-repeat

Question

I am trying to use an ng-repeat on data that is fetched from an api (returned as JSON) When I do a console.log($scope.wines) before the end of the function it holds the value but then at the end of the function $scope.wines is empty again. I feel that this is causing my ng-repeat="wine in wines" isn't showing up correctly.

Here is my JS:

app.controller("MainController", function($scope){

        var api_key = "22x";
        $scope.wines = [];

        // Search Wine Function
    $scope.SearchWine = function(){
        $scope.wines = [];
        var search_api_url = "http://services.wine.com/api/beta2/service.svc/json/catalog?search=" + $scope.wine + "&size=200&apikey=" + api_key;
        var i = 1;

        $("#wine_list").html("");
        $(".loading").show();
        $(".alert").hide();
        $("input[type='text']").val("").focus();


        $.getJSON(search_api_url, function(data) {

            $.each(data, function(key, value) {

                if(key == "Products") {

                    $.each(value.List, function(k, v) {
                        $scope.wines.push(v);
                    });

                    console.log($scope.wines);
                    $(".loading").hide();
                }

            });
            console.log($scope.wines);
        });
        console.log($scope.wines);

    }; //End SearchWine


    });

and here is my HTML

    <div ng-controller="MainController">
    <header>
        <a href="http://powersearch.bestwine.com" class="brand">
            <img src="assets/images/logo.png" alt="">
        </a>
        <div class="col-md-6 col-md-offset-3">
            <form class="search_form">
                <div class="input-group">
              <input type="text" class="form-control" ng-model="wine" placeholder="Search by Winery or AVA...">
              <span class="input-group-btn">
                <button class="btn btn-primary" type="submit" ng-click="SearchWine()">Search</button>
              </span>
            </div><!-- /input-group -->
            <p class="help-block">You can also search international! Try typing in 'Burgundy'</p>
            </form>
        </div>
    </header>

    <div class="container">
        <div class="col-md-12">
            <table class="table table-hover table-bordered">
                <thead>
                    <tr>
                        <th class='text-center'>#</th>
                        <th>Wine Name</th>
                        <th>Wine Appellation</th>
                        <th>Wine Price</th>
                        <th>Favorite</th>
                    </tr>
                </thead>
                <tbody id="wine_list">
                    <tr ng-repeat="wine in wines">
                        <td>{{ wine.Name }}</td>
                        <td>{{ wine.Appellation.Name }}</td>
                    </tr>
                </tbody>
            </table>
            <div class="alert alert-info">Type in above to start.</div>
        </div>
    </div>

</div>

And here is what console displays when running:

enter image description here

If you need anything else, let me know!

score 2 · Answer 1 · edited May 23 '17 at 10:24

Use $resource or $http to fetch data instead of jQuery $.getJson

Here you have detailed answer: AngularJS: factory $http.get JSON file

Additionally avoid using jQuery like this in your Angular code:

$("#wine_list").html("");
$(".loading").show();
$(".alert").hide();
$("input[type='text']").val("").focus();
...

Tasks like this can be handled by angular directives ng-show, ng-hide etc.

$scope array not holding value for ng-repeat

1 Answers1