Angularjs $scope.data not showing in html

Question

I get the response from POST, it prints the data in the console but it doesn't show the data in the html page.

I have my controller, its just that the {{user}} doesnt show in html page

I can see the what it returns in the console,

    angular.module('app.AllUsersCtrl', [])
    .controller('AllUsersCtrl', function ($scope, $http, $cookies, $window, $state) {
        $scope.getAccount = function (n) {
            $http({
                method: 'POST',
                url: '/FYPapp/getAccount',
                data: $.param({
                    username: n
                }),
                headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }
            }).success(function (data, status, headers, config) {
                console.log(JSON.stringify(data));
                $scope.user = JSON.stringify(data);
            });

        };
    });

**Data Returns **

scripts.js:95 {"id":118,"firstname":"Lauren","lastname":"Smithss","description":"the Makup Chair the.....","enabled":true,"user":{"userid":21,"username":"theMak","email":"[email protected]","password":"995bf49114defd4f35d10e477135b89112ecdc2f25af6ab7969112842919ba4dc193b194f9485671","enabled":true},"followers":[],"username":"theMak"}

HTML: This is the html page

<link rel="stylesheet" type="text/css" href="static/app/css/css.scss">
<div class="mainDiv">

<h1> Profile Details</h1>
    {{user}}

</div>

It will be better if you define your data before the http call like this: $scope.data = {} and then make the call. — Pritam Banerjee
– Pritam Banerjee, Commented Feb 6, 2017 at 22:24
Why are you stringifying the data? Just try $scope.user = data. You can display it for debugging via <pre>{{user | json}}</pre> — Phil
– Phil, Commented Feb 6, 2017 at 22:40
its bound by state : .state('profile', { url: "/profile", templateUrl: '/views/profile.html', controller: 'AllUsersCtrl', controllerAs: 'allusers' }) — JJ9999
– JJ9999, Commented Feb 6, 2017 at 23:00
Question as it stands should not be getting upvotes, it has no code or explanation of any merit. — Summer Developer
– Summer Developer, Commented Feb 7, 2017 at 0:14

Pritam Banerjee · Accepted Answer · 2017-02-06 22:43:22Z

1

In your HTML you need to define our controller with ng-controller and also the ng-app which will be your module name.

Then you will need to make the data call.

After that you can directly assign the data to scope like this:

$scope.user = data;

edited Feb 6, 2017 at 22:43

answered Feb 6, 2017 at 22:41

Pritam Banerjee

19.1k10 gold badges97 silver badges113 bronze badges

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

2 Comments

Phil Over a year ago

That's a pretty big assumption. It's obvious from OP's question that the controller is loading and something is calling the getAccount method. Whether the template shown is in the controller's scope is unanswered though

Pritam Banerjee Over a year ago

@Phil I read that later, that he is getting the data. But since he is getting the data in the JSon format there is no need to use JSon.stringify().

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

1

As it appears you're using a controller alias, ie

.state('profile', {
  url: "/profile",
  templateUrl: '/views/profile.html',
  controller: 'AllUsersCtrl',
  controllerAs: 'allusers' // this one here
})

You should be assigning methods and properties to the controller instance, eg

.controller('AllUsersCtrl', ['$http', function($http) {
  var ctrl = this;
  this.getAccount = function(n) {
    $http(...).then(function(response) {
      ctrl.user = response.data;
    });
  };
}])

and in your template...

<img ng-click="allusers.getAccount(something)"...

and

<h1>Profile Details</h1>

<!-- for debugging -->
<pre>{{allusers.user | json}}</pre>

<!-- or for prod -->
<p>{{allusers.user.firstname}} {{allusers.user.lastname}}</p>

edited May 23, 2017 at 12:33

CommunityBot

11 silver badge

answered Feb 6, 2017 at 23:09

Phil

166k25 gold badges265 silver badges269 bronze badges

Comments

Waseem Bashir · Accepted Answer · 2017-02-07 04:37:25Z

-1

You are missing ng-controller in your html templates.

<h1> Profile Details</h1>
{{user}}

answered Feb 7, 2017 at 4:37

Waseem Bashir

6783 gold badges10 silver badges27 bronze badges

Collectives™ on Stack Overflow

Angularjs $scope.data not showing in html

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related