API and jQuery Question/Help (Noob)
gatoruss
Registered Users Posts: 27 Big grins
I am experimenting with the SmugMug API (2.0), and am a complete noob both at to that API and various coding – but am in the process of teaching myself some javascript, etc. I am having a problem accessing SmugMug thru the API, and am not sure if I am just approaching things in the wrong way or trying to do something that cannot be done.
As a learning exercise, I am trying to access the data described here in the SmugMug API documentation (https://api.smugmug.com/api/v2/doc/tutorial/basics.html). I have successfully used javascript (and jQuery) code to access another, unrelated API (Weather Underground) – which returns json formatted data. But when I modify that code to use with the SmugMug API it does not work. The code I am using is posted below:
The HTTP process is not working and is coming back with an error, as the code in red is executing and an Alert with a “Failed!” label appears. After clicking “OK” on that Alert, the Alert with the “Done!” label appears.
Should I be able to access the API using javascript (and jQuery), or is there some intrinsic problem that prevents what I am trying to do?
If I should be able to access the API, any idea of what I am missing?
Where do I address the input my API Key?
Thank you for your patience.
As a learning exercise, I am trying to access the data described here in the SmugMug API documentation (https://api.smugmug.com/api/v2/doc/tutorial/basics.html). I have successfully used javascript (and jQuery) code to access another, unrelated API (Weather Underground) – which returns json formatted data. But when I modify that code to use with the SmugMug API it does not work. The code I am using is posted below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SmugMug API Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
var smug_data = [];
$.ajax({
url : "/api/v2/user/cmac.json",
data: {
host: 'www.smugmug.com',
APIKey : 'XXXXXXXXXXXX',
application: 'json'
},
dataType : "jsonp",
[color=Red][B] error : function($) {
alert("Failed!");[/B][/color]
},
success : function(data) {
alert("Success!");
},
type: 'GET'
});
alert("Done");
});
</script>
</head>
<body>
<div id="div1"><h2>SmugMug API Test Code</h2></div>
</body>
</html>
The HTTP process is not working and is coming back with an error, as the code in red is executing and an Alert with a “Failed!” label appears. After clicking “OK” on that Alert, the Alert with the “Done!” label appears.
Should I be able to access the API using javascript (and jQuery), or is there some intrinsic problem that prevents what I am trying to do?
If I should be able to access the API, any idea of what I am missing?
Where do I address the input my API Key?
Thank you for your patience.
0
Comments
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> --> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>SmugMug API Test</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> var JSONCallback; jQuery(document).ready(function($) { $.ajax({ url : "http://www.smugmug.com/api/v2/user/cmac", data: { APIKey : 'XXXXXXXXXX', Accept : 'application/json', // _pretty : }, jsonp : JSONCallback, dataType : "json", success : function(JSONCallback) { alert("Success!"); alert("Here is some data " + JSONCallback.Response.User.NickName); }, error : function() { alert("Failed!"); } }); alert("Done ") }); </script> </head> <body> <div id="div1"><h2>SmugMug API Test Code</h2></div> </body> </html>Figured I would post in case anyone else was looking.Thanks again.