AngularJS - Why I can't get the JSON by $http.get?

Question

I'm developing a web application in java with NetBeans using AngularJS.

When I'm accessing my WebService in localhost I'm getting the JSON array with the objects that I need, working very well

BUT

in the controller, I'm not getting the information

Log of the Web browser:

Result: [object Object] OR {} script.js:140:5

Success/Error: undefined

Code:

minhaAplicacao.controller('inicioPacienteCTRL', function ($scope, $http) {
    $scope.medicoSelecionado;

    var aux;
    var $scope.result = window.console.log($http.get("http://localhost:8080/Clinica5/webresources/medicos")).then(function (success) {
        aux = success;
    }, function (error) {
        aux = error;
    });

    window.console.log("Result: "+$scope.result+ "  OR  "+JSON.stringify($scope.result));
    window.console.log("Success/Error: "+aux);
});

And if I put this code in the view I got an error:

<div ng-bind="$scope.result"></div>

Error: $scope.result is not defined

I have configured the $routeProvider and is absolutely correct

Thanks a lot <3 Big Hug!

Possible duplicate of [How to wait till the response comes from the $http request, in angularjs?](http://stackoverflow.com/questions/18421830/how-to-wait-till-the-response-comes-from-the-http-request-in-angularjs) — Jigar7521, Dec 06 '16 at 05:59
This is happening because of $scope.result will initialize before till response came, it will not wait until response come, that's why. — Jigar7521, Dec 06 '16 at 06:00

score 1 · Answer 1 · answered Dec 06 '16 at 06:38

You can try in the following way.

minhaAplicacao.controller('inicioPacienteCTRL', function ($scope, $http) {

    $scope.functionName = function(){
        //define
        $scope.medicoSelecionado = {};  
        $http.get("http://localhost:8080/Clinica5/webresources/medicos").then(function (success) {
            console.log(success);
            //success data passed 
            $scope.medicoSelecionado = success;

        }, function (error) {
            console.log(error);
            //error message
            $scope.error = error;
        });

    }
});

And use this html to display error

<div class="error">{{error}}</div>

Vinod Louis · Answer 2 · 2016-12-06T06:04:06.393

You need to assign your response to controller scope variable result as a result of asynch request like this

 $scope.result = success

MoreOver you can avoid using var when declaring $scope variables

minhaAplicacao.controller('inicioPacienteCTRL', function ($scope, $http) {
$scope.medicoSelecionado;

$scope.aux = {};
$scope.result {}; 
$http.get("http://localhost:8080/Clinica5/webresources/medicos").then(function (success) {
    $scope.result = success;
}, function (error) {
    $scope.aux = error;
});

window.console.log("Result: ",$scope.result, "  OR  ",JSON.stringify($scope.result));
window.console.log("Success/Error:",$scope.aux);

});

also in view

 <div ng-bind="result"></div>

no need of $scope

Ramsing Nadeem · Answer 3 · 2016-12-06T06:16:34.457

Try <div ng-model="result"></div> for the second error.

And no need to do:

$scope.medicoSelecionado;
$scope.aux;
$scope.result;

Just use a new model when you need one; no declaration is needed.

Doing $scope.result = successin your .then() should be fine, as suggested by Vinod Louis.

The way I would do it:

minhaAplicacao.controller('inicioPacienteCTRL', function ($scope, $http) {

    $http.get("http://localhost:8080/Clinica5/webresources/medicos")

    .then(function (success) {
                $scope.result = success;
            }, function (error) {
                $scope.result = error;
            });

    window.console.log("Result: "+$scope.result+ "  OR  "+JSON.stringify($scope.result));

});

What does aux do by the way?

score 0 · Answer 4 · answered Dec 06 '16 at 06:05

You have to define var aux = {} because if you not defined anything then it will show undefined
and you are getting object in success so that it is showing [object, object]

minhaAplicacao.controller('inicioPacienteCTRL', function ($scope, $http) {
$scope.medicoSelecionado;

var aux = {};
var $scope.result = window.console.log($http.get("http://localhost:8080/Clinica5/webresources/medicos")).then(function (success) {
    aux = success;
}, function (error) {
    aux = error;
});

window.console.log("Result: "+$scope.result+ "  OR  "+JSON.stringify($scope.result));
window.console.log("Success/Error: "+aux);
});

Rodrigo João Bertotti · Answer 5 · 2016-12-06T16:15:06.500

0

GOT!

For some reason was having conflict with the route 'login'. I don't known why.

The solution was deleting the redirectTo line

when('/inicioMedico', {
     templateUrl: 'inicioMedico.html',
     controller: "inicioMedicoCTRL"
}).
otherwise ({
    // redirectTo: 'login' ERROR HERE
});

edited Dec 06 '16 at 16:15

answered Dec 06 '16 at 15:19

Rodrigo João Bertotti

5,179
2
23
34

AngularJS - Why I can't get the JSON by $http.get?

5 Answers5