I'm using a $http.get service in my app, which is retrieving xml data for conversion. In my plnkr I also have a file named data.xml which has the same formatted xml file as in the url I entered. When I enter data.xml into the $http.get function, the data is received and my app works. When I try plugging in the url, however, it crashes. The browser tells me that I have an illegal token on the line with the url. I've looked over the documentation on the angularjs site and I can't find why I'm getting this error. I'm new to angular and don't have much experience with this service. How can I pull the data from that url?
My current code:
factory('DataSource', ['$http', function($http) {
return {
get: function() {
return $http.get(
'http://50.22.49.237/XMLFiles/ReformatedSample.xml', {
transformResponse: function(data) {
var x2js = new X2JS();
var json = x2js.xml_str2json(data);
return json;
}
}
)
success(function(data, status) {
callback(data);
})
}
}
}]);
Any help is appreciated.
Have you checked the console? Maybe you have a CORS issue.
Related
So I'm new in angular and I'm new with API's
I tried to create thingy, where I can get video information by id, using several tutorials and browsing stackoverflow
I managed to find 2 solutions to the problem, but neither of them work for me.
First I tried
mvcApp.service('ApiCall', ['$http', function($http) {
var result;
this.GetApiCall = function() {
result = $http.get('https://hosting.com/webmasters/video_by_id?id=123456789')
.success(function(data) {
result = (data);
})
.error(function() {
alert('Something wrong');
});
return result;
}}]);
It uses good API link, but return No 'Access-Control-Allow-Origin' header is present on the requested resource error.
Next solution I found was:
mvcApp.factory('json', function($http) {
return {
getInformation: function (name) {
var url = 'https://hosting.com/webmasters/video_by_id';
return $http.jsonp(url, {
params: {
id: name
}
});
}
}});
This one returns errors, as it does not recognises var as a link, and return video_by_id?id=123456789:1 Uncaught SyntaxError: Unexpected token : error. But as I tinkered with it and looked at some other examples, found out that adding extension to links, fixes this, but I do not have or know an extension. So any help would be valuable
If your API is not in the same server as your Angular code, you could handle CORS on the requested resource, to avoid the error.
I'm trying to get a basic query going with the new V2 API and Angular in WordPress 4.4.1. Perhaps someone can help me understand why the URL, /wp-json/wp/v2/posts, gives a JSON response with a 404.
Browsing to that URL gives me JSON like this:
{"code":"rest_no_route","message":"No route was found matching the URL and request method","data":{"status":404}}
And here is the JavaScript I'm using to make that .GET
var base = 'http://localhost:8888/recruitler';
var posts = '/wp-json/wp/v2/posts';
var user = '/wp-json/wp/v2/users/'; // append user id
var s = '/wp-json/wp/v2/posts?filter[s]='; // append search term
// basic HTTP call with Angular
var app = angular.module('app', ['ngRoute'])
app.factory('myService', function($http) {
var myService = {
async: function() {
// $http returns a promise, which has a then function, which also returns a promise
var promise = $http.get( base+posts ).then(function (response) {
// The then function here is an opportunity to modify the response
console.log(response);
// The return value gets picked up by the then in the controller.
return response.data;
});
// Return the promise to the controller
return promise;
}
};
return myService;
});
app.controller('MainCtrl', function( myService, $scope ) {
// Call the async method and then do stuff with what is returned inside our own then function
myService.async().then(function(d) {
$scope.data = d;
});
});
UPDATE:
This must be a local environment issue. Live websites work just fine. I've tested and this issue persists on all my local WAMP and MAMP dev sites. Restarting the server and or checking this answer got it working.
the factory looks right, according to the rest-api docs you need pretty permalinks plugin as well in order to rest-api plugin use custom url rewrites https://wordpress.org/plugins/rest-api/installation/
I am trying to use AngularJS to make a http get call:
<script>
function customersController($scope,$http) {
$http.get('http://www.mee.wherego.ca/api/test/get')
.success(function(response) {$scope.names = response;})
.error(function(response) {
if (response) {$scope.result = response; }
else { $scope.result = 'null'; } });
}
</script>
From UI (Html code), the response is "null" which means response is undefined; however from firefox debugger, it returns a 200 status code but with the following error:
If I just type in the URL in Firefox's address bar, the JSON returned is:
{"execution_result":"passed",
"execution_timestamp":"2015-01-26 16:21:35.856",
"exception":null,
"message":null}
And JSONLint says this is a valid JSON.
In order to eliminate CORS possibility, I also tried to use Apache's CloseableHttpClient to make the get call, and that successfully returned the JSON. I think this tells me the CORS is not an issue.
I am not sure what is going on here; is it really something wrong with the JSON, or is it something wrong with http.get? I am really confused.
I am working on an application and am having an issue posting to a .JSON file in my assets. I am working with an Angular based application. The error code I get is 404 with a response of: Cannot POST /assets/data/card-stack.json. Now the problem is, when I work with my get to retreive the JSON data it works perfect. It is only when I am using .post. Here is what I am doing:
$http.get('./../../assets/data/card-stack.json').success(function(data) {
$scope.cards = data;
// Set the showdown images from the card data grabbed from the card-stack.json file
$scope.showdowns = [
$scope.cards[0].url,
$scope.cards[1].url,
$scope.cards[2].url,
$scope.cards[3].url
];
});
// Simple POST request example (passing data) :
$http.post('./../../assets/data/card-stack.json', {url : './../images/banana.jpg'}).
success(function(data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
}).
error(function(data, status, headers, config) {
console.log(data);
// called asynchronously if an error occurs
// or server returns response with an error status.
});
Suggestions?
A .json file is a static file that just contains json data so you won't be able to post to it. Instead you would need to use a server side page or service such as php to process the posted data.
Try to set the $http header:
$http.defaults.headers.post["Content-Type"] = "application/json";
Try it.
HI i have a micro service running on port 8501.
#RestController
#RequestMapping("/feeds")
public class FeedsController {
#RequestMapping(method = GET)
ResponseEntity<?> findAllFeeds() {
return new ResponseEntity<String>("Hello", OK);
}
}
when i add url http://localhost:8501/feeds, browser displays "Hello". Now i am trying to access this through angularjs get call
in my AngularJs my code is
'use strict';
var app = angular.module('commentsjsApp');
app.controller('MainCtrl', function ($scope,$http) {
$http.jsonp('http://localhost:8501/feeds').success(function(data, status, headers, config){
console.debug("Data : "+data+ "Status");
}).error(function(){
console.debug("error");
});
EDIT :
In Network tab (firebug) i can see the GET with 200 status and response is "Hello". Why i am getting the error in console then? Can any one kindly help me.
and when i run this angularjs app. the following output on console as shown in image
You are requesting a JSONP data, but the server is returning a string. Return a proper JSON object from the server to fix the issue.
Note: Hello world is not valid JSON, but "Hello World" is.
You need to add the header 'Access-Control-Allow-Origin' in the response, since your calling from localhost:9000 to localhost:8501 (they are technically different servers).
#RequestMapping(method = GET)
ResponseEntity<?> findAllFeeds(HttpServletRequest httpRequest,
HttpServletResponse httpResponse) {
httpResponse.addHeader("Access-Control-Allow-Origin",
"http://127.0.0.1:9000");
return new ResponseEntity<String>("Hello", OK);
}
Sometimes Angular requires the colon in the URL to be quoted, try this:
$http.get('http://localhost\\:8501/feeds').success(function(data, status, headers, config){
console.debug("Data : "+data);
}).error(function(){
console.debug("error");
});