API and jQuery Question/Help (Noob)

gatorussgatoruss Big grinsRegistered 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:
<!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.

Comments

  • gatorussgatoruss Big grins Registered Users Posts: 27 Big grins
    edited October 2, 2015
    Well, after playing around with my code and reading reams of google search results, I have been able to get the following code to run successfully:
    <!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.
  • MadhouseMadhouse Beginner grinner Registered Users Posts: 1 Beginner grinner
    edited January 13, 2016
    Thank you. Any luck getting this to work cross-platform?
    "No 'Access-Control-Allow-Origin' header is present on the requested resource."
    
Sign In or Register to comment.