AngularJS: Reading JSON in controller

Question

I am having some problems exposing a field on my AngularJS controller. I have a webservice returning a JSON 'owner' object, with a field called 'Cave'. If this field has a null (or empty/whitespace) value, I want to hide an element in my view using ng-hide. To achieve this, I hope to expose the field 'hideCave' from the controller, shown in its entirety below:

function OwnerController($scope, OwnerFactory, $routeParams) {
    if ($scope.owner == null) {
        $scope.owner = OwnerFactory.getOwner($routeParams.id);
        //$scope.hideCaveat = $scope.owner.Cave == undefined;

        //Outputs 'Hide: {}?undefined'
        alert('Hide: ' + JSON.stringify($scope.owner) + '?' + $scope.hideCaveat); 
    }

    $scope.someButton = function () {
        //Outputs full JSON string when clicked
        alert('Hide: ' + JSON.stringify($scope.owner) + '?' + $scope.hideCaveat); 
    }
}

myApp.factory('OwnerFactory', function ($http) {
    return {
        getOwner: function (id) {
            var url = 'api/Owner/' + id;
            return $http.get(url)
            .then(function (response) {
                return response.data;
            });
        }
    }
});

My data loads fine, but I can't get a value out of $scope.owner.Cave until I add a ng-click event any trigger it.

Example JSON return from web service:

{"FirstName":"David","LastName":"Lynch","Street":"Oak Dr. 7","ZipCode":"90210","Town":"Beverly Hills","Email":"","Cave":"Do not sell this man any more drugs"}

What am I doing wrong since I don't get the value?

Is my issue related to the fact I'm creating a global function for my controller? Should I use myApp.controller instead?

EnigmaRM · Accepted Answer · 2014-03-20 22:29:27Z

2

You should be able to just access it as you would any other object

<div class="alert" ng-show="owner.Cave">{{owner.Cave}}</div>

Plunker In the plunker I just hardcoded the data.

edited Mar 20, 2014 at 22:29

answered Mar 20, 2014 at 22:05

EnigmaRM

7,61211 gold badges48 silver badges74 bronze badges

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

1 Comment

Troels Larsen Over a year ago

You are absolutely right. Many good answers, but this one offers the simplest solution. Thank you very much.

DeadAlready · Accepted Answer · 2014-03-20 21:59:50Z

2

Have you tried using ng-show="owner.Cave" in your template? It should work fine.

The reason why you get an empty object alerted is that the $http.get is not a synchronous function. It returns a promise - so by the time you reach alert you still only have the promise. Only once it has been resolved - such as before you click the button, do you see the actual data.

answered Mar 20, 2014 at 21:59

DeadAlready

3,01822 silver badges19 bronze badges

3 Comments

Troels Larsen Over a year ago

I wish I could upvote this. Enigma beat you to it, but the explanation about the promise was what I was missing. I'll keep that in mind in the future. Thanks!

EnigmaRM Over a year ago

@TroelsLarsen, you can still upvote other answers. It's true that you can only select on answer as the one that solved your problem. But you can upvote any that you found to be helpful.

Troels Larsen Over a year ago

@EnigmaRM: Not until I get 15 reputation, unfortunately.

mpm · Accepted Answer · 2014-03-20 21:58:44Z

1

myApp.factory('OwnerFactory', function ($http) {
    return {
        getOwner: function (id) {
            var url = 'api/Owner/' + id;
            return $http.get(url);
        }
    }
});

and

$scope.owner = OwnerFactory.getOwner($routeParams.id).then(function(data){
     $scope.hideCaveat = data.owner.Cave == undefined;
});

since getOwner returns a promise.

edit

better use ng-hide or ng-show on the data you want to show or hide

<div ng-show="owner.Cave">cave infos</div>

answered Mar 20, 2014 at 21:58

mpm

20.2k7 gold badges52 silver badges56 bronze badges

1 Comment

Troels Larsen Over a year ago

As the other answers, you nailed my problem. Thank you for the help!

user1375096 · Accepted Answer · 2014-03-20 22:22:11Z

1

add a watch at beginning of your controller, so "hideCaveat" is always there.

function OwnerController($scope, OwnerFactory, $routeParams) {
  $scope.$watch( 'owner.Cave', function(cave) {
    if (cave && cave.length > 0) {
      $scope.hideCaveat = false;
    } else {
      $scope.hideCaveat = true;
    }
  });
  ...

answered Mar 20, 2014 at 22:22

user1375096

1 Comment

Troels Larsen Over a year ago

Thanks for the suggestion. But since I can just bind directly (no idea why I didn't try that first), I prefer that solution.

Collectives™ on Stack Overflow

AngularJS: Reading JSON in controller

4 Answers 4

1 Comment

3 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related