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
Related
I want to make a post request to an API (http://nairabox.com/food_documentation/) using Ajax but am kind of confused on how to go about it.
This is what I have tried so far:
$.ajax({
type: "POST",
url: "https://mapp.nairabox.com:8443/api/v1/food/",
dataType : "json",
data: { case: "browse"},
headers: {
'case': 'browse'
},
success: function(data){
console.log('success');
}
})
So far, it is returning no result.
What could I be getting wrong?
The API doc is here (http://nairabox.com/food_documentation/)
The documentation you link to does not say to add any custom HTTP request headers.
You, however, are doing so here:
headers: {
'case': 'browse'
},
The case data belongs in the data and only in the data.
By adding the custom header, you are preventing the request from being simple and triggering a preflight OPTIONS request which the server does not accept.
Remove the above and you will get a response (and your success function will fire … you should probably do something with the data argument though)
Note, also, that the documentation says you should pass latitude and longitude as well as case.
Unless you add them, the response you get is unlikely to be useful.
I am trying to use NOAA's climate data API with AJAX https://www.ncdc.noaa.gov/cdo-web/webservices/v2#gettingStarted and am not having any luck. I get "bad request" when I try the AJAX way, and a CORS error when I try xhttp. Does anyone know how to format a code snippet that would get a response, without any CORS issues?
Thanks!
var noaaUrl = "https://www.ncdc.noaa.gov/cdo-web/api/v2/datasets";
var tokenFromNoaa = "aToken";
$.ajax({
url: noaaUrl,
headers:{
token: tokenFromNoaa
},
success: function(returnedData) {
console.log(returnedData);
}
})
You need to replace the "aToken" with the actual token they gave you and replace datasets with whichever endpoint you want to access.
This should log the data into your browser console. You can access that by pressing F12. This code snippet also requires jQuery to use.
I have 2 questions:
1) I'm trying to retrieve a list of posts from Instagram via javascript but I keep getting errors:
$(document).ready(function() {
$.ajax({
url: 'https://www.instagram.com/explore/tags/lion/?__a=1',
dataType: 'jsonp',
type: 'GET',
success: function(data){
console.log(data);
},
error: function(data){
console.log(data);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The error I get:
SyntaxError: missing ; before statement[Learn More]
If I change jsonp to json:
Cross-Origin Request Blocked
How can I overcome this problem?
2)Is it maybe not allowed to get data for my site from the url https://www.instagram.com/explore/tags/lion/?__a=1 ? (maybe they consider it like scraping?)
I have tried to check the official api page but it sounds like only users who have an instagram account and are logged in would be able to see the contents of the feed after retrieving an oauth2 token.
EDIT:
Seems like that to send a request to this url i need jsonp but since I'm not getting the answer in a proper format I'm not sure how can I make this request work. (There isn't already a question like this on stackoverflow about Instagram. The API has recently changed so I'm trying to find a workaround).
According to the Instagram Developers Documentation you should pass a valid access token on the URL using the ?access_token=ACCESS-TOKEN parameter.
https://www.instagram.com/developer/endpoints/tags/
Try removing dataType: 'jsonp' from your AJAX request to get the actual error response from Instagram
I'm very new to web development.
When I input this link
https://api.locu.com/v1_0/venue/search/?name=jimmy%20johns&api_key=b1f51f4ae241770f72fca5924d045733c4135412
into my browser, I can see the JSON object.
What do I need to do so can I use this JSON object in my javascript? I've tried using JQuery's $.getJSON with no luck.
EDIT
Using JSONP worked! Appending &jsonp=readJSON&?callback=? to the URL gave me back the JSON I wanted. Thank you for all the informative answers.
$.getJSON( "https://api.locu.com/v1_0/venue/search/?name=jimmy%20johns&api_key=b1f51f4ae241770f72fca5924d045733c4135412&jsonp=readJSON&?callback=?", function() {
console.log( "success" );
})
function readJSON(response){
console.log (response);
}
The question is, is this domain (api.locu.com) the same from where you serve your files? I suppose it isn't. In this case, you have two options:
Your backend can proxy the request from this site
You have to use a JSONP object if it's supported by the API
I'm no clear about your question, but I think you can use a call ajax, something like:
$.ajax({
url: "https://api.locu.com/v1_0/venue/search/?name=jimmy%20johns&api_key=b1f51f4ae241770f72fca5924d045733c4135412",
type: 'get',
cache: false,
success: function (response) {
console.log(response);
}
});
This should get the concept across if you are using JQuery... but you can use just about anything.
var url = "https://api.locu.com/v1_0/venue/search/?name=jimmy%20johns&api_key=b1f51f4ae241770f72fca5924d045733c4135412";
var result;
var settings = {
success: function(data){
result = data;
//do anything else related to this data here as you need it fetched, and is not linear.
}
}
$.ajax(url, settings);
Now, I noticed you used getJSON, which is pretty much the exact same. I did not however see you use a success function, so if you did your way, have you tried:
$.getJSON(url, function(data){
result = data;
});
I may be mistaken, but you say: "With no luck" so i have a limited understanding as to what you tried with $.getJSON
Not directly from inside a web browser, no. You would need to use a proxy: another server that makes this request in your behalf and then gives you the result.
Why not?
Web browsers are pretty tight on security. One of the strategies for protecting users from malicious activity is restricting the domains your Javascript can make HTTP requests to.
An HTTP request from your domain (the origin) to another domain is called a cross-origin request. These are forbidden by default, and you won't be able to read the response body, unless the received HTTP response includes the header Access-Control-Allow-Origin.
How then?
By using a proxy as an intermediary. The proxy is not a web browser, it doesn't care about Access-Control-Allow-Origin, and will read the response anyway.
There are a number of proxies you can use. An easy one is YQL (the Yahoo Query Language). Here's an article on the topic, using jQuery: http://ajaxian.com/archives/using-yql-as-a-proxy-for-cross-domain-ajax
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.