Basic Call to API displaying courses?

[tfredrickson]

Recently I was assigned a project for my CIS class with multiple choices and for the challenge chose to tackle connecting to the Canvas API to display courses on a simple web page. During this last week, I have combed through the API documents as well as quite a few posts regarding ajax. My end result is to connect to outcomes or outcome_results and pull data regarding courses from that. To start off, I am able to get a response from the ajax call to the API @ https://mydomain.instructure/api/v1/courses?access_token=(mytokenhere) but am unable to display the data to my page. Secondly, in regards to my initial endpoint of outcomes (as per assignment requirements), is this even possible? The reason I ask is due to searching the URL's for outcomes or outcome_results I end up with an unauthorized access or just plain not found. Lastly, I am trying to do all of this within HTML, JS, and JQuery without the use of php.

[llawson]

Hi there,

There are a few questions we need to address first. What is your role inside Canvas? Are you an admin, instructor, or student? Do you just need the JSON response containing the list of courses or do you have a web page that makes the API call?

[tfredrickson]

Thank you for your time to respond to my question. Currently, I am a student. As to the second question, I have a web page I would like to display the courses to. At this moment I have the JSON response from the server (seen through F12 in the browser, network tab). 

[llawson]

Can you post a sanitized version of the code?

[tfredrickson]

var canvasURL = "https://spscc.instructure.com/api/v1/courses?access_token=mytokenhere";

var viewData = '';
function displayCourses() {
   $.ajax({
      accept: 'application/json+canvas-string-ids',
      url: canvasURL,
      type: 'GET',
      contentType: 'application/json; charset=utf-8',
      dataType: 'jsonp',
      success: function (data) {
         console.log(data);
         console.log("Success");
   },
      done: function () {
         console.log("Done");
   },
      error: function () {
         console.log("Error");
   },
      fail: function () {
         console.log("Request Failed");
   },
      complete: function (status) {
         console.log("Complete " + status.statusText);
   }

}); // end ajax get
   }
      $(document).ready(function () {
         console.log("Doc Loaded");
         displayCourses();

}); // end document ready