Angular JS - HTTP GET request throws error - json

Question

I am very new to Angular JS and the Ionic application. I have tried to fetch the json data from the url . But, unfortunately I could not get any response. Instead, I get the error as shown in the screen below
I have tried in two ways,
Try 1:
function(){
return $http.get("url?subjStudyId=441",{'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}).then(function(response){
chats = response.data;
alert(JSON.stringify(chats));
return chats;
},function(err) {
alert(JSON.stringify(err));
})
}
Try 2:
function($http) {
var chats = [];
return {
all: function(){
return $http.get("url?subjStudyId=441").then(function(response){
chats = response.data;
alert(JSON.stringify(chats));
return chats;
},function(err) {
alert(JSON.stringify(err));
})
}
}
Please help me finding the solution .

Answer 1

Your problem may be CORS which stands for Cross-Origin Resource Sharing take a look at this in-depth CORS article here.
Enable CORS on your backend and try to do the request again. You can also make use of JSONP by enabling that on the backend then doing
$http.jsonp('url?callback=JSON_CALLBACK&param=value);
JSONP stands for "JSON with Padding" (and JSON stands for JavaScript
Object Notation), is a way to get data from another domain that
bypasses CORS (Cross Origin Resource Sharing) rules. CORS is a set of
"rules," about transferring data between sites that have a different
domain name from the client.
I coded up two examples, one using $http.get and the other $http.jsonp, neither work which tells me that you don't have Access-Control-Allow-Origin "*" in your server nor do you have JSONP support setup. Head over to enable-cors.org, they got nice articles to help you get CORS setup on your backend.
Technically, you should stick to CORS, since JSONP is more of a security concern. So if nothing is stopping you from just enabling CORS then stick to that.
Example of doing a standard $http.get and $http.jsonp requests via the use of promises.
var app = angular.module("MyApp", []);
app.controller("MyCtrl", function($scope, $http){
$scope.data = "";
$scope.normalCall = function(){
var results = $http.get('http://202.133.56.91:8081/SD_BIO/app/retrievenotifications.action?subjStudyId=441')
.then(function(response){
$scope.data = response;
}, function(error){
$scope.data = error;
});
return results;
};
$scope.jsonPCall = function(){
var results =$http.jsonp("http://202.133.56.91:8081/SD_BIO/app/retrievenotifications.action?callback=JSON_CALLBACK")
.then(function(response){
$scope.data = response;
}, function(error){
$scope.data = error;
});
return results;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
<div ng-controller="MyCtrl">
<button ng-click="normalCall()">Original Call</button> |
<button ng-click="jsonPCall()">JSONP Call</button>
<br><br>
<div ng-model="data">{{data}}</div>
</div>
</div>

Answer 2

You need to specify the url you are going to do the GET
url?subjStudyId=441
isn't a url, it needs to be something like -> someurl.com/?subjStudyId=441 where the -> ? is the query start and the -> = is the value you are