Consuming JSON string array, returned by a webservice, in AngularJS

Question

There is a Webservice that is returning a json object in below format:

["Brazil","Argentina","Chile"]

(this json object has been parsed by Online JSON parsers, which proves it is a proper json object)

In AngularJS, I wrote the below code to consume the WebService.

app.factory('webServiceFactory', ['$http', function ($http) {
    return $http.get('http://SomeWebService/api/anOperation')
            .success(function (data) {
                return data;
            })
            .error(function (err) {
                return err;
            });
}]);

When I call this in my controller, the success part is never hit and, instead, the error part is executed. That means there is some error calling the web-service. I think it has to do something with the JSON object that is being returned.

Edit 1: The Controller code

app.controller('mainController', ['$scope', 'webServiceFactory', function ($scope, webServiceFactory) {

webServiceFactory.success(function (data) {
    $scope.Countries = data;
});

}]);

Edit 2: Localhost & CORS

When I hosted the service in my local IIS and consumed it using localhost, it worked. That means there is no error in consuming the JSON String array.

However, when I use a Fully qualified name or machine name, the FireFox indicates CORS header missing 'Access-Control-Allow-Origin'.

This might lead to another question, as to how to make it CORS compatible. However, the main question is closed.

So, my question, is How do I consume a web-service in AngularJS that returns just an array of strings with no Key/Value pair?

Thanks

Answer 1

maybe you are doing a request to a service in other domain; that is not possible since exists the "same origin policy" https://www.w3.org/Security/wiki/Same_Origin_Policy

Answer 2

     app.factory('webServiceFactory', ['$http', function ($http) {
            return
             {
               getCountries: function(callback){
                   $http.get('http://SomeWebService/api/anOperation').then(function(reponse){
                     callback(response.data);
                 });
               }
             };
            }]);

Then in your controller

webServiceFactory.getCountries(function(countries){
  $scope.countries = countries;
});