Angular.JS binding isn't working

Question

I have an extremely simple setup here

index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body ng-app="locationApp" ng-controller="locationController">
    <button ng-click="getLocation()">Get Location</button>
    <br />
    Latitude: {{city.Latitude}} <br />
    Longitude {{city.Longitude}} <br />
    <script src="Scripts/lib/angular.min.js"></script>
    <script src="Scripts/app.js"></script>
</body>
</html>

app.js:

var locationApp = angular.module('locationApp', []);

var locationController = locationApp.controller("locationController", function ($scope, $http) {
    $scope.getLocation = function () {
        $http.get("https://localhost:44320/api/location?cityName=sg").then(function (location) {
            $scope.city = location;
        });
    }
});

When I click on the Get Location button, my bindings {{city.Latitude}} and {{city.Longitude}} remains blank.

I tried debugging by setting a break point in Chrome, and my values do show up. So I'm not sure what I'm missing. Any help?

I'm using AngularJS 1.6

it's location.data in your case. The get request is returning a whole request object, and you want '.data'. — theleebriggs
– theleebriggs, Commented Jan 26, 2017 at 15:13

devqon · Accepted Answer · 2017-01-26 15:14:18Z

2

The parameter passed to the then function is the response object. The response object contains the data:

$http.get("https://localhost:44320/api/location?cityName=sg").then(function (response) {
    $scope.city = response.data;
});

answered Jan 26, 2017 at 15:14

devqon

14k2 gold badges32 silver badges46 bronze badges

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

Comments

Erik Jensen · Accepted Answer · 2017-01-26 15:14:44Z

1

Is the location returned the response from the web service?

Did you actually want to do:

$scope.city = location.data;

answered Jan 26, 2017 at 15:14

Erik Jensen

443 bronze badges

Comments

Anthony · Accepted Answer · 2017-01-26 15:14:50Z

1

You want the data object returned in the get function.

Try $scope.city = location.data

answered Jan 26, 2017 at 15:14

Anthony

1,8772 gold badges18 silver badges30 bronze badges

Comments

Shubhranshu · Accepted Answer · 2017-01-26 15:12:40Z

-2

Use $scope.apply() after getting the response to start the new digest.

answered Jan 26, 2017 at 15:12

Shubhranshu

5213 silver badges12 bronze badges

Collectives™ on Stack Overflow

Angular.JS binding isn't working

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related