CanvasLMS JQuery help needed (More of a Jquery question)

[hallow gazelle]

Hi. I am trying to create an extension for CanvasLMS (the website often used for colleges to host class information) to make extending an assignment easier. I am trying to load all of the students in the course into a dropdown menu and I can't seem to get all the students in a way that is usable?

async function getStudents() : Promise<User[]>{
    var studentList: User[] = [];
    var something = getAll($.get, "users", { 'enrollment_type[]': 'student' });
    console.log("This is the result of the getAll: " + something);
    return studentList;
}```

this is currently my function, and I don't really understand how to store it into studentList

the only thing that returns from the getAll is quite literally object Object

[silk oar]

don't use var. At all.
What is getAll(…)?

[solar wren]

don't use jQuery either. can only assume you need to await getAll()

[hallow gazelle]

getAll is canvas's implementation to get all of something from a class

in this circumstance, I'm getting every user that matches the student type enrollment

[silk oar]

yes, but what's its signature?

[hallow gazelle]

(alias) getAll(verb: HandleResult, url: string, options: object): JQueryPromise<any>

[silk oar]

dafuq is a JQueryPromise... anyway. Put await before the getAll

[hallow gazelle]

in simple terms, basically just a guarantee something will return from your jquery statement lol

[hallow gazelle]

that was part of the fix, can't believe i missed that

this is now the resulting console log

simple sounding quesiton but I've really just never done it, how would I go about adding these objects individually as options in a dropdown menu?

[solar wren]

console.log('this is the result', something);

[hallow gazelle]

<div class="select-student">
    <button class="dropdown" id="select">Select Student</button>Selected student: <span id="selected-student"></span>
    <div id="actual-dropdown" class="student-list">
        <p>test</p>
    </div>
</div>```

[silk oar]

that would be https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/add

[hallow gazelle]

the menu in question

[silk oar]

Agoknee, should we notify P35 that we found one of his 34 brothers?

[hallow gazelle]

oh lord

am i similar to a known member of the server lol

usually that's not a fantastic sign 😆

[solar wren]

in this case, you should feel honored. surely you aren't worthy

[hallow gazelle]

bahaha

[hallow gazelle]

i worded my question poorly

I meant to ask like

how would I sequentially add them? add each student as an option? wouldn't the thing you posted just post one option with all the students?

perhaps im being dumb

or I am used to having fight every step of the way to get canvas to cooperate

[solar wren]

for..of and the link he provided

[silk oar]

yes, iterate over the array using

for (const student of students) {
   // add one option here
}

[hallow gazelle]

thank you. that's an easy answer but unfortunately im used to being barred from using for loops

my school's standards are... weird

wait

[solar wren]

dafaq?

[hallow gazelle]

well

my statement here will add context

[solar wren]

must use jQuery and can't use a for loop??

[hallow gazelle]

alternatively couldn't I map through the get all result?

because it's an array of objects

my school discouraged the use of for loops and encouraged mapping instead

[solar wren]

map() should not have side-effects. theoretically you could map to elements and append those, but it's an odd choice

your school is terrible

[hallow gazelle]

bahahah

[solar wren]

classic for loops and for..of should be used almost-exclusively (when you need side-effects)

[hallow gazelle]

o7

[silk oar]

maybe you misunderstood your teacher. In the following case, .map should be preferred over loops:

// meh
const result = []
for (const x of xs) {
  result.push(f(x))
}

// better
const result = xs.map(x => f(x))

but loops are not inherently bad and sometimes even more up to the task than .map.

[hallow gazelle]

no. like for an entire class you would get points off for using for loops after map was introduced

i sincerely wish i was joking. caused many hours of frustration

[silk oar]

then go to another school. They obviously can't teach you anything of value.
Alternatively feel free to send your teacher here, so we can kick their ass.

[hallow gazelle]

hahaha

well as im about to enter my last semester it's a bit late for that

hm. perhaps im misunderstanding?

async function getStudents(){
    var studentList = await getAll($.get, "users", { 'enrollment_type[]': 'student' });
    for (const student of studentList){
        document.getElementById("actual-dropdown").add(student)
    }
    //console.log("This is the result of the getAll: " + something);
}```

<div class="select-student">
    <button class="dropdown" id="select">Select Student</button>Selected student: <span id="selected-student"></span>
    <div id="actual-dropdown" class="student-list">
        <p>test</p>
    </div>
</div>```

it is both complaining in document.getElementById("actual-dropdown") that object could be null

and then it says that HTML element doesn't have .add?

answered my own question. I tried to make code shorter but missed the point

double nvm

[silk oar]

don't

use

var

[hallow gazelle]

still same errors

    const studentList = await getAll($.get, "users", { 'enrollment_type[]': 'student' });
    const dropdownlocation = document.getElementById("actual-dropdown");
    var option = document.createElement("option");
    for (const student of studentList){
        option.text = student;
        dropdownlocation.add(option);
    }```

i fixed that part

this is now the inner of the function

fixed the object could be null part

still getting and stuck on Property 'add' does not exist on type 'HTMLElement'.

looked up fixes and they only seemed to be in situations where someone was trying to store an input into a variable, so I'm not entirely sure what to do here

[silk oar]

then you are likely selecting the wrong element. HTMLElement does not feature .add. But HTMLSelectElement does.

[hallow gazelle]

<select id="actual-dropdown" class="student-list">
        <option>test</option>
 
</select>```

that's what I am supposedly selecting

does it not like that it's within a div?

oh wait I know why it's upset

so because canvas is in fact a bitch

you can't just throw in raw html, you have to make consts to inject into the website as html

so since it's not looking directly at html code, it's not recognizing the fact that it's in a const

so it's never gonna not think it's just a htmlelement