Problem in request with jQuery ($ .ajax) and Angular ($ http)

Question

Problem in request with jQuery ($ .ajax) and Angular ($ http)

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

I'm trying to get some data from an API in the quickest and most direct way. Using Postman I get this easily just by giving a GET in the url ( link ), 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 do a GET using jQuery or Angular, I can not. Below are the two calls and the errors I get.

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 (...)

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) (d = b [d (d)], void 0 === d & (d = null), d) : b}
Object {method: "JSONP", transformRequest: Array 1 , transformResponse: Array 1 , url:   " link ", headers: Object}

Note: I can see the return, however it is presented as an error so I can not manipulate the data. Look!

Important! I do not have access to the API, so I would welcome solutions that stick to some of the proposed methods (jQuery or Angular).

javascript jquery angularjs

asked by anonymous 30.11.2015 / 20:33

2 answers

0

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

Return current:

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

Correct return:

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

link

01.12.2015 / 14:29

Error when using TDD with Ruby Send list of objects JSON c #

score 0 · Accepted Answer

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 is to support JSONP, however you would have to be careful about who already uses it and expects the result to be simply JSON, and the other would be to add the 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 side of who consumes it.

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 works as a kind of proxy for the external API, so you would use jQuery or Angular to make the request to the server that hosts your site, where there are no restrictions and it would make the request to the external API.