I'm attempting to build a web app using Spotify's web API however, I find their tutorial lacking. The way it works is data is requested using POST and GET functionality and sent back using JSON. Seems easy enough, want to get information about an artist? Just call GET https://api.spotify.com/v1/artists/0OdUWJ0sBjDrqHygGUXeCF and you get a nice JSON document with information about the requested artist.
The problem is I don't know how to make that GET call. jQuery has get and post methods both with "data" parameters but I'm not sure on the syntax necessary, especially when it comes to exchanging an authorization code for an access token. If you visit Spotify's authorization guide and scroll to step 4 of the Authorization Code Flow you can see I need to make a POST call to https://accounts.spotify.com/api/token. The call must have 3 request body parameters and 1 header parameter and upon succession a JSON file with the appropriate data is in the response body.
My question is how do I make POST and GET calls that have body parameters and header parameters and how do I extract the JSON data from the response body after a successful call?
As you can see from their code examples & libraries and this jsFiddle, their getUserData request is nothing but a simple ajax call, which contains their url and a headers object (which contains a prefix string concatenated with the accessToken) as parameters:
function getUserData(accessToken) {
return $.ajax({
url: 'https://api.spotify.com/v1/me',
headers: {
'Authorization': 'Bearer ' + accessToken
}
});
}
Generally, when you need to pass parameters in an $.ajax call, just do as shown above, or construct an object first and include it like this:
YourObj = {
url: "your url here",
param2: "param val 2",
param3: "param val 3",
...
}
$.ajax(YourObj).done(function(data){
//do something with the returned data here, e.g.
console.log("data: ", data);
});
This approach can be useful if your parameters are dependent on other values which are not so readily avalable.
Related
I am trying to send a get request to my rails backend using angular. So what am looking for is the request like this
Parameters: {"location"=>"london", "q"=>{"price_gteq":"33333", "price_lteq":"7777"}}
So in my app.js I tried below code to send the request with the parameters. I am now getting unexpected / and the second nested parameter is not showing aswell as seen below.
$http({
url: "/search.json",
method: "GET",
params: {location: $scope.searchLocation, q: {price_gteq: $scope.min_price, price_lteq: $scope.max_price} }
})
This is what i get when I try like above
Parameters: {"location"=>"london", "q"=>"{\"price_gteq\":\"33333\"}"}
Could someone tell me what am doing wrong here??
By default angular uses $httpParamSerializer which actually can handle nested parameters. Check if your $http uses this service. If for some reason it doesn't work, you can write own paramSerializer and pass it into $http configuration object.
Also check if price_lteq present at the moment, when you send request.
The service API I am consuming has a given GET method that requires the data be sent in the body of the request.
The data required in the body is a list of id's separated by hypen and could potentially be very large and thus it must be sent in the body otherwise it will likely foobar somewhere in the browsers/proxies/webservers etc chain. Note I don't have control over the service or API so please don't make suggestions to change it.
I am using the following jQuery code however observing the request/response in fiddler I can see that the "data" I am sending is ALWAYS converted and appended to the query string despite me setting the "processData" option to false...
$.ajax({
url: "htttp://api.com/entity/list($body)",
type: "GET",
data: "id1-id2-id3",
contentType: "text/plain",
dataType: "json",
processData: false, // avoid the data being parsed to query string params
success: onSuccess,
error: onError
});
Anyone know how I can force the "data" value to be sent in the body of the request?
In general, that's not how systems use GET requests. So, it will be hard to get your libraries to play along. In fact, the spec says that "If the request method is a case-sensitive match for GET or HEAD act as if data is null." So, I think you are out of luck unless the browser you are using doesn't respect that part of the spec.
You can probably setup an endpoint on your own server for a POST ajax request, then redirect that in your server code to a GET request with a body.
If you aren't absolutely tied to GET requests with the body being the data, you have two options.
POST with data: This is probably what you want. If you are passing data along, that probably means you are modifying some model or performing some action on the server. These types of actions are typically done with POST requests.
GET with query string data: You can convert your data to query string parameters and pass them along to the server that way.
url: 'somesite.com/models/thing?ids=1,2,3'
we all know generally that for sending the data according to the http standards we generally use POST request.
But if you really want to use Get for sending the data in your scenario
I would suggest you to use the query-string or query-parameters.
1.GET use of Query string as.
{{url}}admin/recordings/some_id
here the some_id is mendatory parameter to send and can be used and req.params.some_id at server side.
2.GET use of query string as{{url}}admin/recordings?durationExact=34&isFavourite=true
here the durationExact ,isFavourite is optional strings to send and can be used and req.query.durationExact and req.query.isFavourite at server side.
3.GET Sending arrays
{{url}}admin/recordings/sessions/?os["Windows","Linux","Macintosh"]
and you can access those array values at server side like this
let osValues = JSON.parse(req.query.os);
if(osValues.length > 0)
{
for (let i=0; i<osValues.length; i++)
{
console.log(osValues[i])
//do whatever you want to do here
}
}
Just in case somebody ist still coming along this question:
There is a body query object in any request. You do not need to parse it yourself.
E.g. if you want to send an accessToken from a client with GET, you could do it like this:
const request = require('superagent');
request.get(`http://localhost:3000/download?accessToken=${accessToken}`).end((err, res) => {
if (err) throw new Error(err);
console.log(res);
});
The server request object then looks like {request: { ... query: { accessToken: abcfed } ... } }
You know, I have a not so standard way around this. I typically use nextjs. I like to make things restful if at all possible. If I need to make a get request I instead use post and in the body I add a submethod parameter which is GET. At which point my server side handles it. I know it's still a post method technically but this makes the intention clear and I don't need to add any query parameters. Then the get method handles a get request using the data provided in the post method. Hopefully this helps. It's a bit of a side step around proper protocol but it does mean there's no crazy work around and the code on the server side can handle it without any problems. The first thing present in the server side is if(subMethod === "GET"){|DO WHATEVER YOU NEED|}
I'm currently looking to use ProductHunt's API (https://api.producthunt.com/v1/docs) to make simple get requests. Their API requires a token and a redirect URI. When I try to access their posts and apply the ApiKey I've been given along with a URI, I'm redirected to the URI but not given a JSON object. What would a getJSON or AJAX request therefore look like?
In my browser,when I try to make a simple request to their JSON, I get a bunch of bad responses. As it is, I'm simply trying to retrieve their JSON to access posts but am unsure how to construct a URL to retrieve this without getting redirected.
Here is what I have as a simple request so far:
var query_params = { client_id:'[my apikey]' ,
response_type:'code',
redirect_uri:'[my URI]',
scope:'public+private',
};
$.ajax({
url:'https://api.producthunt.com/v1/posts',
type:'GET',
data:query_params,
crossDomain:true,
dataType:'jsonp',
success:function(data){
console.log(data)
},
error:function(){
console.log('Failed!');
}
});
What would the request URL look like to be able to access their JSON object? Also what am I missing in the code above? Thanks for any help on this matter.
I'm consuming Product Hunt API in Python, I guess the request is pretty much the same.
You are missing an header with your access token
headers = {'Accept':'application/json',
'Content-Type':'application/json',
'Authorization': 'Bearer '+acess_token,
'Host':'api.producthunt.com'}
try to add this to your get request, it should return a valid JSON
In my localhost url, am getting all the values which is being passed to the other page are getting displayed in the url.
I dont want it to display the values which are passing,
for example
http://localhost/accounting/credit/credit.php?prod=sdfsdfsd-12&prodId=6&batch=567567
am using window.location.href to pass the values to other page, i think that is the reason its getting added to the url. Is there any other way to pass the values other than window.location.href ? or is there any other way to pass.
Is it possible to make the url not to display the values ?
I just want the url to display as below
http://localhost/accounting/medismo/credit_note/credit.php
How can i do this ?
You can do this pretty simply using jQuery and an HTTP request:
$.ajax({
url: 'credit.php',
type: 'POST',
data: { prod: 'sdfsdf-12', prodID: 6 },
success: function (data, status) {
// Handle successful request
},
error: function (xhr, status, err) {
// Handle request failure
}
});
In this case, data is an object containing all the information you want to pass over to the given url. In your .php file you can access this information using:
$_POST["prod"], $_POST["prodID"], etc.
The tool you are using is called the GET-method to pass variables trough a URI! Another method you can use is the POST-method, which uses html forms (still visible in the source code).
For information about those two HTTP request methods, look here or use Google!
The next best method would be using a php session, where (when used properly) users won't be able to see the variables directly!
I have two domains: www.domain1.com and www.domain2.com
I have a plain JSON feed on domain1.
I want to pull the JSON feed from domain1 and put it on a module on domain2.
From what I've read, the way to go about it is by using JSONP but how do you go about doing that? Is there a way to do it with just JQuery/javascript? Or would I have to use server-side code (I'm using Coldfusion). Also could I just use .getJSON and not .ajax (I'm a beginner so I've never used .ajax yet)
EDIT
Okay I'm still getting confused. Just adding callback at the end of the url broke it. How could I make it so that instead of a remote path for a feed I am pulling an absolute path where this code is on www.domain2.com but the feed is on www.domain1.com?
var feed ="/event/json.tag/tag/sports/";
$.getJSON(feed,function(data) {
$.each(data.items, function(i,obj) {
do something here...
}
}
JSONP is just a callback function wrapped around a JSON object.
General convention is to have an endpoint that returns JSON, unless a callback parameter is defined on the request, and returns JSONP in that case.
i.e. http://www.domain1.com/api/getStuff might return:
{'foo': 'bar', 'fizz': 'buzz'}
then http://www.domain1.com/api/getStuff?cb=cb123 should return:
cb123({'foo': 'bar', 'fizz': 'buzz'});
I don't know ColdFusion, but I assume this example is good: http://www.coldfusionjedi.com/index.cfm/2009/3/11/Writing-a-JSONP-service-in-ColdFusion
There's no client-only solution unless somebody else already built JSONP support into the server you're working with...
Reading the jQuery Documentation $.ajax and $.getJSON will be a good start, anyway there are a lot of good tutorials about jsonp, this one for example is a great tutorial:
$.getJSON("http://api.oscar.aol.com/presence/get?k=key&f=json&t=aimuser&c=?",
function(result){
if (result.response.data.users[0].state == 'online') {
$("#status").css("background-image", "url('online.jpg')");
}
}
);
As mention in the website:
The f parameter tells the service what
format to return the results in--JSON
in our case. The c parameter specifies
the JSON callback to use--this is
important!
And in the jQuery documentation:
If the URL includes the string
"callback=?" (or similar, as defined
by the server-side API), the request
is treated as JSONP instead.
So keep in mind sending a callback and handling the data afterwords will be easy.
EDIT: another good example.
EDIT2:
When not specifying the callback value, jQuery will assign it for you (from the $.getJSON page) the flickr URL will become:
http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=jsonp1294786450519&tags=cat&tagmode=any&format=json
And the response:
jsonp1294786450519({
"title": "Recent Uploads tagged cat",
"link": "http://www.flickr.com/photos/tags/cat/",
"description": "",
"modified": "2011-01-11T22:47:12Z",
"generator": "http://www.flickr.com/",
"items": [
{ .... rest of json
So you need to wrap your json with the callback sent from domain1
You could retrieve the JSON 'feed' from domain1 and pass that data as a parameter to your own Javascript function (on domain2) when your request is completed (onComplete / onSuccess).