Issue Fetching All Classes from Canvas API in React Project

Jump to solution
grande_ilvr
Community Member

 

Hello everyone,

I'm currently a university student with a fairly rudimentary level of experience with React and JS. I'm developing a Chrome extension using React that interfaces with the Canvas API to retrieve all of my active courses for integration with another REST API. However, I’m encountering an issue where only three out of my total enrolled courses are being displayed on the console. I’m confident that I’m enrolled in more courses (currently 4 for this semester and I took 5 last semester), but the API only returns three in each instance.

Here’s a brief overview of what I’m doing:

Setup:

  1. React Component: I have a simple form where I input my Canvas API token and the institution subdomain. When I submit the form, it triggers a call to the getActiveCourses function from the canvasApi.js file.

  2. API Class: In my CanvasApi class, I’m using the /courses endpoint to retrieve the courses and then filtering based on start_at and end_at to determine active courses.

I've attached a screenshot of the relevant function (let me know if I ought to remove it)

 

 

0 Likes
1 Solution

Then it sounds like you do retain access to concluded courses and the problem you are running into is pagination. By default, only the first 10 items of a list are returned in the Canvas API. You can either add a "per_page=#" query parameter (replacing # with a number higher than 10) or you could rewrite your code to look for the "next" link in the link header as described in the Canvas API docs. Alternatively, you could let the API do the filtering part for you by using the "enrollment_state=active" query parameter.

View solution in original post