AngularJS not showing $scope

Question

I know this question has been answered but given solutions didn't work for me. Everything looks okey, but the contento between curly brackets it's not showing on screen.

    <div ng-controller="Hello">
        <p>The ID is {{greeting.ip}}</p>
        <p>The content is {{greeting.ip}}</p>
    </div>

The controller is the folling:

 'use strict';
angular.module('sbAdminApp')
    .controller('Hello',['$scope','$http', function ($scope, $http) {

$http.get('http://ip.jsontest.com/')
    .then(function (data) {
            $scope.greeting = data;
    console.log($scope.greeting);
        });
    }]);

And in my app.js, im declaring this:

       .state('dashboard.test', {
            templateUrl: 'views/test.html',
            url: '/test',
            controller: 'Hello',
            resolve: {
                loadMyFiles: function ($ocLazyLoad) {
                    return $ocLazyLoad.load({
                        name: 'sbAdminApp',
                        files: ['scripts/controllers/helloWorld.js']
                    })
                }
            }
        })

The JSON URL from where I'm getting the data is this.

And here are the pics with the output from the console:

Hristo Enev · Accepted Answer · 2016-02-03 13:11:13Z

1

$scope.greeting = data; This line is wrong.

It should be $scope.greeting = data.data;

EDIT:

Because you are assigning your response from the server to that variable and you need only the data returned from the API call. You response object contains stuff like headers and status code and the data property which actually contains your the data you need like id and stuff. If you want to get the id from your response object you can do it like this: greeting.data.id.

I always name my response variable res or response so not to mess it up. Like this:

$http.get('http://ip.jsontest.com/')
    .then(function (res) {
            $scope.greeting = res.data;
            console.log($scope.greeting);
        });
    }]);

edited Feb 3, 2016 at 13:11

answered Feb 3, 2016 at 13:02

Hristo Enev

2,5491 gold badge23 silver badges32 bronze badges

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

2 Comments

Miguel Xoel Garcia Over a year ago

totally worked. I feel a bit stupid now. Could you explain me why? Thanks!

Hristo Enev Over a year ago

Edit has been provided. Hope it helps.

Martijn Welker · Accepted Answer · 2016-02-03 13:02:43Z

0

The problem is you're doing the following:

$scope.greeting = data;

But according to your JSON it should be:

$scope.greeting = data.data;

The data variable holds the whole JSON object, and you want the data key from it.

answered Feb 3, 2016 at 13:02

Martijn Welker

5,6151 gold badge19 silver badges26 bronze badges

Collectives™ on Stack Overflow

AngularJS not showing $scope

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related