Getting successful result with $.ajax request but Error-500 with $http request

Question

I am working on a small web application which simplifies the process of creating and populating USPTO IDS forms by accessing data from another server. For accessing data I am using this API - http://ops.epo.org/3.1/rest-services/published-data/publication/epodoc/US9623902/biblio.js.

I am doing this with angular and hence I used $http but it is throwing error 500 (Internal Server Error). while doing it with ajax-request, its working fine. In fact any other method like $.get() instead of ajax throwing the same error, even I used ng-resource get method but no help. I am not getting what I am doing wrong.

Here are my codes -

$.get( "http://ops.epo.org/3.1/rest-services/published-data/publication/epodoc/US9623902/biblio.js",
function( data ) {
    vm.inventors = data['ops:world-patent-data']['exchange-documents']['exchange-document']['bibliographic-data']['parties']['inventors']['inventor'];
    console.log(vm.inventors);
});


var req = {
    method: 'GET',
    url: 'http://ops.epo.org/3.1/rest-services/published-data/publication/epodoc/US9623902/full-cycle.js',
   };
$http(req).then(function(response){
   console.log(response);
}, function(response){
    console.log(response);
});

Both of these codes are throwing error 500. Here is the image

while this code is working fine. But here I am getting an issue of page load, the page is loaded before data is bound to $scope and hence not showing on the page.

  $.ajax({
     url: 'http://ops.epo.org/3.1/rest-services/published-data/publication/epodoc/' + 'US9623902' + '/biblio.js',
     type: 'GET',
     dataType: "jsonP",
     success: function(data) {
         vm.inventors = data['ops:world-patent-data']['exchange-documents']['exchange-document']['bibliographic-data']['parties']['inventors']['inventor'];
         console.log(vm.inventors);
     },
     error: function(XMLHttpRequest, textStatus, errorThrown) {
        vm.errorContent = [{
            heading: "Error",
            description: "Could not load json data "
        }];
        return false;
    }
});

Image of successful result

Any help would be appreciated. Thank you.

Answer 1

I didn't get where the problem lies in my "GET" request. But "jsonP" method of $http did solve this issue.

@Sachila - As data is not being sent, the transformation is not required.

Answer 2

if you are using x-www-form-urlencoded as header, you might need to transform your request.

var req = {
  method: 'GET',
  url: 'http://ops.epo.org/3.1/rest-services/published-data/publication/epodoc/US9623902/full-cycle.js',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },

  transformRequest: function(obj) {
        var str = [];
        for(var p in obj)
        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
        return str.join("&");
    },
};