-1

I want to save JSON-Data from my Rest-API in a $scope variable for further usage. The problem is when the Code is executed, i see in Firebug that i've got the JSON Data sucessfully, but the problem is, that i cant save it in my Scope variable and i dont know why.

My app.js

var app = angular.module('shop', ['ngRoute','ngResource'])
  .factory('Customerservice', function ($resource) {
      return $resource('http://localhost:8080/Shop/:customer',{customer: "@customer"});
})
  .config(function ($routeProvider, $locationProvider) {
      $routeProvider.when('/name/:ID', {
          templateUrl : "Customer/customers.html",
          controller : 'customerController'
      });
})
  .controller('customerController', function ($scope,Customerservice) {
      $scope.customerinfo = Customerservice.get({customer: "Mark"});
      alert($scope.customerinfo);
});

Like i said, i've got the JSON-Data but the Problem is in my Controller "customerController". I just put the alert function in my Code to see whats in my $scope.customerinfo. And well the Content of customerinfo is just object: Object. I noticed something strange while debbuging with Firebug. It looks like that the alert is executed before the get request. This would explain why there is no data in my $scope variable. Can anyone help me here.

georgeawg
  • 48,608
  • 13
  • 72
  • 95
member2
  • 155
  • 2
  • 16
  • 1
    If you try to alert object, alert would show only [object: objcet]. To see the value in alert, you have stringify the json object by using JSON.stringify function. Or for viewing it, you can use console.log(). – Muhammed Neswine Mar 25 '17 at 16:30
  • use console log instead of alert – Sachila Ranawaka Mar 25 '17 at 16:31
  • Do one thing put debugger at alert and open Chrome Developer Tool, when execution stop at that line, just hover on $scope.customerinfo. You will see the content of object . – Dilip Belgumpi Mar 25 '17 at 16:32

2 Answers2

2

Use $promise property

It is important to realize that invoking a $resource object method immediately returns an empty reference (object or array depending on isArray). Once the data is returned from the server the existing reference is populated with the actual data.

$scope.customerinfo = CustomerService.get({customer: "Mark"});

console.log($scope.customerinfo); //Empty object

However, the $resource service also attaches a $promise property that can be used to delay code execution until the data has arrived from the server:

$scope.customerinfo = CustomerService.get({customer: "Mark"});
console.log($scope.customerinfo); //Empty object

//USE $promise
$scope.customerinfo.$promise
  .then(function(info) {
    console.log($scope.customerinfo); //Fulfilled object
    return info;
}).catch(function(errorResponse) {
    console.log(errorResponse.status);
    throw errorResponse;
});

The Resource instances and collections have these additional properties:

  • $promise: the promise of the original server interaction that created this instance or collection.

On success, the promise is resolved with the same resource instance or collection object, updated with data from server. This makes it easy to use in resolve section of $routeProvider.when() to defer view rendering until the resource(s) are loaded.

On failure, the promise is rejected with the http response object, without the resource property.

— AngularJS ngResource $resource API Reference

georgeawg
  • 48,608
  • 13
  • 72
  • 95
1

$resource is async api so you can't get value from direct return of function call, its contains a variable $promise which will return promise so you need to call then function of it

Try this 

UserService.get({customer: "Mark"}).$promise.then(function(data) {
    $scope.customerinfo = data;
    alert($scope.customerinfo);
});
Gaurav Kumar Singh
  • 1,550
  • 3
  • 11
  • 31
  • `$resource` object methods don't return promises. There is no `.then` method on objects returned by $resource factory. *It is important to realize that invoking a `$resource` object method immediately returns an empty reference (object or array depending on `isArray`). Once the data is returned from the server the existing reference is populated with the actual data.* See [AngularJS $resource API Reference](https://docs.angularjs.org/api/ngResource/service/$resource). – georgeawg Mar 25 '17 at 17:38
  • Yes, you are right `$resource` object methods don't return promises but it contains `$promise` variable which return the promise, I've updated my code according to this – Gaurav Kumar Singh Mar 25 '17 at 17:48
  • ty your answer and georgeawg helped me solve the problem – member2 Mar 25 '17 at 18:59