Handling data response from $resource in angular js

Question

I have a RESTful application with Laravel 4 and Angular JS.

In my Laravel Controller,

public function index() {

  $careers = Career::paginate( $limit = 10 );

  return Response::json(array(
    'status'  => 'success',
    'message' => 'Careers successfully loaded!',
    'careers' => $careers->toArray()),
    200
  );
}

And the angular script,

var app = angular.module('myApp', ['ngResource']);

app.factory('Data', function(){
    return {
        root_path: "<?php echo Request::root(); ?>/"
    };
});

app.factory( 'Career', [ '$resource', 'Data', function( $resource, Data ) {
   return $resource( Data.root_path + 'api/v1/careers/:id', { id: '@id'});
}]);

function CareerCtrl($scope, $http, Data, Career) {

    $scope.init = function () {
        $scope.careers = Career.query(); 
    };
}

Here I am little confused to handle the response data to assign to scope variable, now I am getting empty array [] in $scope.careers. And also How can I handle success and error to show some messages like the following normal $http service,

$scope.init = function () {

    Data.showLoading(); // loading progress
    $http({method: 'GET', url: Data.root_path + 'api/v1/careers'}).
    success(function(data, status, headers, config) {
        Data.hideLoading();
        $scope.careers = data.careers.data;
    }).
    error(function(data, status, headers, config) {

        if(data.error.hasOwnProperty('message')) {
            errorNotification(data.error.message); 
        } else {
            errorNotification();
        }

        $scope.careers = [];
    });
};

See my request in console using $resource.

enter image description here

Anshad Vattapoyil · Accepted Answer · 2013-11-06 02:37:17Z

15

Try this:

app.factory( 'Career', [ '$resource', 'Data', function( $resource, Data ) {
   return $resource( Data.root_path + 'api/v1/careers/:id', { id: '@id'}, {
    query: {
        isArray: false,
        method: 'GET'
    }
   });
}]);


Career.query(function(res) {
   $scope.careers = res.careers.data;
}, function(error) {
  // Error handler code
});

edited Nov 6, 2013 at 2:37

Anshad Vattapoyil

23.5k19 gold badges90 silver badges134 bronze badges

answered Nov 5, 2013 at 7:17

Nitish Kumar

4,8503 gold badges22 silver badges38 bronze badges

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

1 Comment

Awena Over a year ago

same here been struggling for hours

fabmilo · Accepted Answer · 2013-11-01 17:59:25Z

2

See: http://docs.angularjs.org/api/ngResource.$resource

$scope.init = function () {
    var success = function(careerList, getResponseHeaders){
      $scope.careers = careerList;
    };
    var failure = function(data){
      // TODO
    };
    Career.query(success, failure); 
};

Due to this quirks and other annoyances I would suggest to use Restangular instead of the default $resource . It makes life much easier

edited Nov 1, 2013 at 17:59

answered Nov 1, 2013 at 3:59

fabmilo

48.5k16 gold badges108 silver badges123 bronze badges

4 Comments

Anshad Vattapoyil Over a year ago

My first question, Why I am getting empty array [] in $scope.careers ?

Anshad Vattapoyil Over a year ago

It's not failure.see the screen-shot, I am getting all values, how can I map this to scope variable?

fabmilo Over a year ago

do you get that screenshot with the $resource call or with the $http call ? Also try the new code edited. You get the data on the callback and that might be ran after the query function returns.

Anshad Vattapoyil Over a year ago

The screen-shot is from $resource, and using your code also I am getting same and $scope.careers as undefined

Collectives™ on Stack Overflow

Handling data response from $resource in angular js

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related