CODEWITHSUNDEEP
javascriptangularjs
Miguel Xoel Garcia
Miguel Xoel Garcia

Reputation: 307

AngularJS not showing $scope

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:

It looks ok!

Upvotes: 0

Views: 45

Answers (2)

Hristo Enev
Hristo Enev

Reputation: 2541

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

Upvotes: 1

Martijn Welker
Martijn Welker

Reputation: 5605

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.

Upvotes: 0

Related Questions