$http GET array of objects from an api

Question

Below is my AirTableService.js

(function () {
    "use strict";   
    var AirTableService = function ($http, $q) {
        var AirTableMethods = {
            getMyRounds: function(AirTable_secret){
                var deferObject_myRounds;
                var myRounds_promise = $http.get('https://api.airtable.com/v0/XXXXXXX/Rounds?view=Main%20View&maxRecords=10&callback=JSON_CALLBACK', {
                    headers : {
                        'Authorization' : AirTable_secret.apikey,
                        'Content-Type' : 'application/json'
                    }
                });
                deferObject_myRounds = deferObject_myRounds || $q.defer();

                myRounds_promise.then(function(data){
                    deferObject_myRounds.resolve(data);
                });                
                return deferObject_myRounds.promise;
            }
        };
        return AirTableMethods;
    };

    AirTableService.$inject = ['$http', '$q'];

    angular.module('appGolf')
      .service('AirTableService', AirTableService);

}());

In there as you can see, using AirTable's api I am trying to GET data from my table. I'm passing the parameters view and maxRecords and it works. Documentation states I can pass sort,

which I then changed to,

https://api.airtable.com/v0/XXXXXXX/Rounds?view=Main%20View&maxRecords=10&sort=[{field:'RoundID',direction:'desc'}]&callback=JSON_CALLBACK

and clearly that doesn't work and it it gives me this error,
I know this is because sort is a array of objects and I know how I am passing this is incorrect.

My question is, how do you do this in AngularJS?

Thank you in advance.

Possible duplicate of Send array via GET request with AngularJS' $http service — user27414
– user27414, Commented May 3, 2016 at 14:14
$http already returns a promise. You don't have to use $q. — Kyle
– Kyle, Commented May 3, 2016 at 14:20
your error message shows an extra single quote after 'desc', you didn't add that by mistake, right? — DrewJordan
– DrewJordan, Commented May 3, 2016 at 14:30

Community · Accepted Answer · 2017-05-23 12:01:52Z

2

Found the answer here As mentioned there, I needed to add,

paramSerializer: '$httpParamSerializerJQLike',

And if you are interested, my function now looks like,

var myRounds_promise = $http.get('https://api.airtable.com/v0/XXXXX/Rounds?callback=JSON_CALLBACK', {
                params: {
                    view: 'Main View',       
                    maxRecords: 10,
                    sort: [{"field": 'RoundID', "direction":'desc'}]                        
                },
                paramSerializer: '$httpParamSerializerJQLike',                    
                headers : {
                    'Authorization' : AirTable_secret.apikey,
                    'Content-Type' : 'application/json'
                }
            });

Thanks everyone for their suggestions and helping me out.

edited May 23, 2017 at 12:01

CommunityBot

11 silver badge

answered May 3, 2016 at 18:12

MadushM

3973 silver badges17 bronze badges

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

Comments

Kyle · Accepted Answer · 2016-05-03 14:36:21Z

1

Your service is very verbose and hard to read. I would write it like this:

var app = angular.module("myApp", [ /* dependencies */ ]);

app.factory("AirTableService", ["$http", function($http) {
    return {
        getMyRounds: function(AirTable_secret) {
            return $http.get('path/to/API', {
                //put your sorting JSON object here in params
                params: { sort: [{field: "RoundID", direction: "desc"}] },
                headers: {
                    'Authorization' : AirTable_secret.apikey,
                    'Content-Type' : 'application/json'
                }
            });
        },
        anotherMethod: function() {
            //etc....
        },
        yetAnotherMethod: function() {
            return $http.post(); //maybe POST something
        }
    };
}]);

Inject it to your controller and use:

AirTableService.getMyRounds(airtableSecret).then(successCallback).catch(errorCallback);

edited May 3, 2016 at 14:36

answered May 3, 2016 at 14:30

Kyle

5,6077 gold badges38 silver badges48 bronze badges

1 Comment

MadushM Over a year ago

I tried as you suggested but still getting the same error. BTW appreciate formatting my service, it makes sense.

Collectives™ on Stack Overflow

$http GET array of objects from an api

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related