CODEWITHSUNDEEP
angularjsapiresourcesparameters
thomasvdbossche
thomasvdbossche

Reputation: 117

Unable to get data from RESTfull API using AngularJS and $resource

I'm making a mobile app using ionic (based on the AngularJS framework) where I want to display data from a RESTfull API. I'm pretty new to AngularJS so I'm not familiar with the best practices. I want to get data from this API but with a weeknumber parameters in the URL so I can get data from specific weeks. I have looked especially to the example of the AngularJS website.

This is what I have in my services:

var eventServices = angular.module('starter.services', ['ngResource']);

eventServices.factory('EventServiceAPI',['$resource', 
    function($resource) {
        return $resource('http://localhost:8080/schedulingAPI/plannedevents?weeknumber=:weeknumber', {}, {
            query: { method: 'GET', params:{weeknumber:'weeknumber'}, isArray: true} 
    });
}]);

This is what I have in my controller to get the API data:

$scope.events = EventServiceAPI.get({weeknumber: 7});

However, I still keep getting the error:

Error: [$resource:badcfg] object

When I use the full API URL in services and $scope.events = EventServiceAPI.query() in my controller, the full API-data is displayed without error.

I also don't get where to put the parameters; in the brackets after the resource URL or the params option in the query method.

Edit: The output of http://localhost:8080/schedulingAPI/plannedevents?weeknumber=:weeknumber

[{"id":2985,"event":{"eventId":589,"subject":"Masterproef","year":2014,"weekNumber":7,"dayNumber":6,"startHour":8,"startMinute":10,"endHour":12,"endMinute":45,"startTime":"2014-02-14T07:10:00Z","endTime":"2014-02-14T11:45:00Z","classgroups":[{"id":8,"name":"4ELICTI"},{"id":4,"name":"4ENAU"},{"id":10,"name":"4ELICTE"},{"id":1,"name":"4CHB"},{"id":3,"name":"4ENEL"},{"id":9,"name":"4EMEM"},{"id":2,"name":"4CHC"},[]],"teacher":null},"rooms":[{"id":24,"abbr":"D015"}]},{"id":4021,"event":{"eventId":604,"subject":"Bedrijfsbeleid 2 hc","year":2014,"weekNumber":7,"dayNumber":6,"startHour":8,"startMinute":10,"endHour":9,"endMinute":35,"startTime":"2014-02-14T07:10:00Z","endTime":"2014-02-14T08:35:00Z","classgroups":[{"id":6,"name":"4ELICT"},[]],"teacher":null},"rooms":[{"id":44,"abbr":"G120"}]}]

Upvotes: 0

Views: 1151

Answers (1)

Khanh TO
Khanh TO

Reputation: 48972

Replace params:{weeknumber:'weeknumber'} with params:{weeknumber:'@weeknumber'}, notice the @.

If the parameter value is prefixed with @ then the value of that parameter is extracted from the data object (useful for non-GET operations).

From angular documentation

And call your function with query:

$scope.events = EventServiceAPI.query({weeknumber: 7});

Actually, you can simplify your resource declaration like this:

eventServices.factory('EventServiceAPI',['$resource', 
    function($resource) {
        return $resource('http://localhost:8080/schedulingAPI/plannedevents');
    });
}]);

Angular will automatically append the query string for you

Upvotes: 2

Related Questions