Request problem with jQuery ($.ajax) and Angular ($http)

Question

I am trying to get some data from an API in the fastest and most direct way. Using Postman I can easily get it just by giving a GET to the url (http://www.wsfebracis.com.br/Json/ListarGrupos), so I get:

{
  "error": 0,
  "grupos": [
    {
      "Titulo": "A inteligência emocional do seu corpo",
      "ID": 1
    },
    {
      "Titulo": "Sua inteligência emocional em família",
      "ID": 2
    },
    {
      "Titulo": "Sua inteligência emocional em sociedade",
      "ID": 3
    },
    {
      "Titulo": "Sua inteligência emocional no trabalho",
      "ID": 4
    },
    {
      "Titulo": "Sua inteligência emocional nas férias",
      "ID": 5
    },
    {
      "Titulo": "Sua inteligência emocional no dia a dia",
      "ID": 6
    }
  ]
}

But when I try to make a GET using jQuery or Angular, I can’t. Below follow the two calls and the errors I get.

1. Using jQuery

   $.ajax({
     type: 'GET',
     dataType: 'JSONP',
     url: 'http://www.wsfebracis.com.br/Json/ListarGrupos/',
     success: function(data) {
       console.log(data);
     },
     error: function(e) {
       console.log(e);
     }
   }).done(function( data ) {
     console.log("done ", data);
   })
   .fail( function(xhr, textStatus, errorThrown) {
       console.log('erro');
       console.log(xhr.responseText);
       console.log(textStatus);
       console.log(errorThrown);
   });
   

• Object {readyState: 4, status: 200, statusText: "Success"}
• error
• Undefined
• parsererror
• Error: jQuery111108493785087484866_1448911631891 was not called(...)

2. Using Angular

   $http.jsonp('http://www.wsfebracis.com.br/Json/ListarGrupos/ListarGrupos')
   .success(function(data, status, headers, config) {
     $log.error(data);
     $log.error(status);
     $log.error(headers);
     $log.error(config);
   })
   .error(function(data, status, headers, config) {
     $log.log(data);
     $log.log(status);
     $log.log(headers);
     $log.log(config);
   });
   

• Undefined
• (d){b||(b=ad(a));return d?(d=b[F(d)],void 0===d&&(d=null),d):b}
• Object {method: "JSONP", transformRequest: Array1, transformResponse: Array1, url: "http://www.wsfebracis.com.br/Json/ListarGrupos", headers: Object}

Note: I can see the return, but it is presented as an error, so I cannot manipulate the data. See!

Important! I don’t have access to the API, so solutions that relate to some of the proposed methods (jQuery or Angular).

Answer 1

You are trying to use JSONP to access the API but it does not seem to support the same.

If this API is yours and you can modify it there are two things that can be done, one of them is to support JSONP, but you would have to be careful who already uses it and expect the result to be simply JSON, and the other would be to add CORS headers to allow access to this API from other domains, remembering that this should be done on the API side and not on the consumer side.

If these alternatives are not possible there is always the possibility of you making the requests on the server. Basically you create a new API on your site that acts as a kind of proxy for the external API, so you would use jQuery or Angular to request the server that hosts your site, where there are no restrictions and this would request the external API.

Answer 2

You will have to modify the return of service, since it is a JSONP.

Current return:

{"error":0,"grupos":[{"Titulo":"A inteligência emocio...}

Correct return:

callback({"error":0,"grupos":[{"Titulo":"A inteligência emocio...})

https://stackoverflow.com/questions/19165925/jsonp-call-showing-uncaught-syntaxerror-unexpected-token

https://stackoverflow.com/a/19166256/1803238