CODEWITHSUNDEEP
javascripthtmlangularjs
JJ9999
JJ9999

Reputation: 51

Angularjs $scope.data not showing in html

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>

Upvotes: 2

Views: 1427

Answers (3)

Waseem Bashir
Waseem Bashir

Reputation: 678

You are missing ng-controller in your html templates.

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

Upvotes: -1

Phil
Phil

Reputation: 164980

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>

Upvotes: 1

Pritam Banerjee
Pritam Banerjee

Reputation: 18958

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;

Upvotes: 1

Related Questions