AngularJS $scope variable only set once through HTTP GET

Question

I have an API that I'm trying to get data from from a separate AngularJS application.

There is a button that I'm using to load in data from the API. When pressed it calls the $scope.getApiData function, which is bound to a variable called $scope.productlist. Each entry has a delete button which calls the $scope.deleteProduct function.

The API is working properly, though it's using ASP.NET 5.

The code called when 'Update' is pressed is also called after a 'Delete' press.

(function () {
'use strict';

angular
    .module('app')
    .controller('Products', main);

main.$inject = ['$scope', '$http'];

function main($scope, $http) {
    $scope.productlist = [];

    // Get products from API
    $scope.getApiData = function () {
        $http({
            method: 'GET',
            url: "http://localhost:65040/api/products",
        }).then(function successCallback(response) {
            $scope.productlist = response.data;
        }, function errorCallback(response) {
            alert('Error');
        });
    };

    // Delete a product
    $scope.deleteProduct = function (idx) {
        $http({
            method: 'DELETE',
            url: "http://localhost:65040/api/products",
            params: { 'id': idx },
        }).then(function successCallback(response) {
            $scope.getApiData();
        });
    };

}

})();

However, when the $scope.getApiData is called a second time--either manually or by deleting an item--it doesn't correctly update the list to reflect the state of the API, even though the correct results are returned in the HTTP response. The list remains the same, and the whole application has to be restarted for it to reflect the data in the API.

HTML:

<table>
    <tr>
        <td>ID</td>
        <td>Item Name</td>
        <td>Price</td>
    </tr>
    <tr ng-repeat="product in productlist">
        <td>{{product.Id}}</td>
        <td>{{product.Name}}</td>
        <td>{{product.Price}}</td>
        <td><button ng-click="deleteProduct(product.Id)">X</button></td>
    </tr>
</table>

<button ng-click="getApiData()">Update</button>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="app/app.module.js"></script>
<script src="app/main.js"></script>

Having a problems figuring this out. Thanks for reading!

why dont you just remove the item from the array if the callback is sucessful and keep the back independent from the front end? — andresmijares
– andresmijares, Commented Dec 3, 2015 at 15:28
Is that you full html code. I don't see any ng-app, ng-controller in it. — Vivek
– Vivek, Commented Dec 3, 2015 at 15:28
@VVK It's not, the editor didn't like the full thing. Here's a screenshot of everything: i.sstatic.net/Rtij4.png Pastebin: pastebin.com/r2bgHER8 — Callum Evans
– Callum Evans, Commented Dec 3, 2015 at 15:35
@andresmijares25 I'll give it a shot. I'd rather understand why the current setup isn't working, though :) — Callum Evans
– Callum Evans, Commented Dec 3, 2015 at 15:36

Community · Accepted Answer · 2017-05-23 12:33:18Z

1

It turns out that the request was being cached. I don't know how pretty it is, but adding a unique parameter to the request sorted it out. I found that solution here: Angular IE Caching issue for $http

So my request now looks like

   // Get products from API
    $scope.getApiData = function () {
        $http({
            method: 'GET',
            url: "http://localhost:65040/api/products",
            params: { 'foobar' : new Date().getTime() }
        }).then(function successCallback(response) {
            $scope.productlist = response.data;
        }, function errorCallback(response) {
            alert('Error');
        });
    };

Which works as I wanted.

edited May 23, 2017 at 12:33

CommunityBot

11 silver badge

answered Dec 3, 2015 at 16:09

Callum Evans

3614 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vivek · Accepted Answer · 2015-12-03 15:45:41Z

0

You should put your scripts in head tag and not in body tag.

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8" />
    <title>Products</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="app/app.module.js"></script>
    <script src="app/main.js"></script>
</head>
<body ng-controller="Products">
    <table>
        <tr>
            <td>ID</td>
            <td>Item Name</td>
            <td>Price</td>
        </tr>
        <tr ng-repeat="product in productlist">
            <td>{{product.Id}}</td>
            <td>{{product.Name}}</td>
            <td>{{product.Price}}</td>
            <td><button ng-click="deleteProduct(product.Id)">X</button></td>
        </tr>
    </table>

    <button ng-click="getApiData()">Update</button>

</body>
</html>

answered Dec 3, 2015 at 15:45

Vivek

13.6k19 gold badges101 silver badges139 bronze badges

1 Comment

Callum Evans Over a year ago

That wouldn't solve the problem here, and last I heard there are mixed opinions on where script files should go anyway.

Collectives™ on Stack Overflow

AngularJS $scope variable only set once through HTTP GET

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related