We are currently trying to get the Json data from JsonStub using AngularJS. We tried to replicate JsonStub's example but had no luck getting this to work with our apikeys.
We just want to show {"message":"hello world!"} within AngularJS from JsonStub's.
Here is our code, please let me know we're doing wrong.
Thank you.
Controller
.controller('warrantyListController', function($scope, $http) {
$http({
url: 'http://jsonstub.com/jobs',
method: 'GET',
dataType: 'json',
data: '',
headers: {
'Content-Type': 'application/json',
'JsonStub-User-Key': 'xxxxx-xxxxx-xxxxx-xxxxx',
'JsonStub-Project-Key': 'xxxxx-xxxxx-xxxxx-xxxxx'
}
})
.success(function (data, status, headers, config) {
alert(JSON.stringify(data, null, 4));
});
})
JsonStub
To do with the fact that its a cross domain request. Open up F12 dev tool and have a look.
XMLHttpRequest cannot load http://jsonstub.com/jobs. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://run.plnkr.co' is therefore not allowed access. The response had HTTP status code 500.
Actual Fix
Add the following header
'Access-Control-Allow-Origin': 'http://jsonstub.com'
or, to allow all
'Access-Control-Allow-Origin': '*'
Possible addition to fix, depending on Angular version
There has been a know issue in previous versions of Angular with CORS, but it can be resolved with the following config change:
.config(function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
})
Related
So I've been trying to use the time_filter parameter to get a list of my current and future Events (so no past events) but instead I'm getting all the events; so that parameter is not working for me. Is weird because other parameters like 'expand=venue' do work, but when I try for example time_filter=current_future it doesn't work and instead I still receive all events including those events that has expired.
Here is the AJAX code I'm using to call the API:
$.ajax({
type: 'GET',
url: 'https://www.eventbriteapi.com/v3/users/me/events/?time_filter=current_future&expand=venue&token=MYTOKEN',
dataType: 'json',
contentType: 'application/json'
}).done(function (result) {
//result code goes here
});
Has anyone here successfully used the time_filter parameter and if so what am I doing wrong? because that parameter is the only one that the GET call ignores cause all the others I've used work. Any help is appreciated.
Thanks!
Found the solution. Removing contentType: 'application/json' solves the issue. I'm not sure why, maybe is cause since I'm not sending data then it perhaps steps in the way of the parameters I'm trying to send. Either way, for those using Eventbride API and are not sending custom data and also want to use the time_filter parameter; then removing contentType: 'application/json' will solve the problem.
Here is the working code:
$.ajax({
type: 'GET',
url: 'https://www.eventbriteapi.com/v3/users/me/events/?time_filter=current_future&expand=venue&token=MYTOKEN',
dataType: 'json'
}).done(function (result) {
//result code goes here
});
This is a question for anyone who has used Stripe.js. I am trying to build a payment system with express and node. I have been stuck on this problem for about a day. I just want to post a json object with {"token":"token_val","item":"item_val"}. I am so close to getting it done, but when I post the data to my payment route my json object is messed up. I am getting a json of the form {'{"token":"token_val","item":"item_val"}': ''}.
var stripeHandler = StripeCheckout.configure({
key: stripePublicKey,
locale: 'en',
token: function(token){
var cartItem = document.getElementById("Monthly").id;
var data = [{stripeTokenId: token.id, items: cartItem}];
fetch('/purchase', {
method: "POST", // *GET, POST, PUT, DELETE, etc.
mode: "cors", // no-cors, cors, *same-origin
cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
credentials: "same-origin", // include, *same-origin, omit
headers: {
// "Content-Type": "application/json",
"Content-Type": "application/x-www-form-urlencoded",
},
redirect: "follow", // manual, *follow, error
referrer: "no-referrer", // no-referrer, *client
body: JSON.stringify(data) // body data type must match "Content-Type" header
})
}
})
Is there something wrong with this post that's causing the issue? I can't seem to understand why I'm getting this json obj key with a blank value.
I have tried two different content types, but nothing really seems to make a difference.
The problem was that I was not using express.json(). I added app.use(express.json()) to my app.js file and this fixed everything. I hope this helps someone.
The fetch() API is not POSTing this JSON body.
var j = {
"addressee": "James"
};
return fetch('http://requestb.in/blahblahblah', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Cache-Control': 'no-cache'
},
body: JSON.stringify(j)
})
There is absolutely no request body showing up in RequestBin for this. What could be happening to the body? Debugging JSON.stringify(j) shows that it is indeed formatting the body correctly.
Turns out the fetch() API was sending an OPTIONS preflight request, to see the CORS configuration on the server. Removing the headers in my fetch() request stopped this from happening.
I solved this by changing
<input type="submit" onSubmit={()=>{}}/>
to
<button type="button" onClick={this.someFunction}>Submit</button>
Don't know why, but while using ReactJS developed app in Firefox, this has always worked for me. Without this, the browser simply did not fire the POST request(could not see it in the Developer Options:Network Tab).
Using this remedy, it just worked without doing any other change, started seeing the POST requests.
I am trying to send an JSON object to my webservice which is expecting JSON in the request data.
This my POST call from angularJS
$http({method: 'POST',
url: 'update.htm',
data: $.param($scope.cover),
headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}
}).success(function (data) {
// handle
});
Value for cover object
$scope.cover = {id:1, bean:{id:2}}
Iam getting 500 (InvalidPropertyException: Invalid property 'bean[id]' of bean class [BookBean]: Property referenced in indexed property path 'bean[id]' is neither an array nor a List nor a Map;)
In network, it is sending in this way
bean[id]:1
I think it should send like
bean.id:1
How to reslove this issue. Thanks in advance
Looks like the data is getting to the server and is causing an error there. There's a possible duplicate question that's been answered here - Post Nested Object to Spring MVC controller using JSON
Try posting your data like:
$http({method: 'POST',
url: 'update.htm',
data: $scope.cover,
}).success(function (data) {
// handle
});
Here is my little first project as practice, having real trouble figuring out how to use JSON, took me a while to get it work locally but still no luck with servers, and tried few a including one i hosted, and even tried it with other hosted json files.
http://jsfiddle.net/Atlas_/Mgyc5/1/
$.ajax({
dataType: "json",
async: false,
url: "package.json", //https://www.dropbox.com/s/fmw63i4v7dtnx6t/package.json
'success': function (json) {
theQuiz = json.quiz;
console.log(json);
console.log(theQuiz);
}
});
When you access another domain be carefully with "Crossdomain".
To use with dropbox, try changing the URL to:
https://dl.dropboxusercontent.com/s/fmw63i4v7dtnx6t/package.json
Your code will be like this:
$.ajax({
dataType: "json",
async: false,
url: "https://dl.dropboxusercontent.com/s/fmw63i4v7dtnx6t/package.json",
success: function (json) {
theQuiz = json.quiz;
console.log(json);
console.log(theQuiz);
}
});
When you request 'dl.dropboxusercontent.com', you have this:
Access-Control-Allow-Origin: *
https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS?redirectlocale=en-US&redirectslug=HTTP_access_control
"In this case, the server responds with a Access-Control-Allow-Origin:
* which means that the resource can be accessed by any domain in a cross-site manner."
Another options: Some websites (twitter, for example) work with "jsonp". http://en.wikipedia.org/wiki/JSONP or ..you can create your own proxy.