CODEWITHSUNDEEP
javascriptangularjs
Null Reference
Null Reference

Reputation: 11340

Angular.JS binding isn't working

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

enter image description here

Upvotes: 0

Views: 69

Answers (4)

Anthony
Anthony

Reputation: 1827

You want the data object returned in the get function.

Try $scope.city = location.data

Upvotes: 1

Erik Jensen
Erik Jensen

Reputation: 44

Is the location returned the response from the web service?

Did you actually want to do:

$scope.city = location.data;

Upvotes: 1

devqon
devqon

Reputation: 13997

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;
});

Upvotes: 2

Shubhranshu
Shubhranshu

Reputation: 521

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

Upvotes: -2

Related Questions