Building Dropdown with for loop

Ask the community
,
1

We have a client that runs a band rental business. They have a super large custom rental form we are building now and I am having an issue building some of the dropdowns.

We have a dropdown for the grade of a student and the options they can choose from is determined from which school they choose. In a database we have all of the schools and then the low grade and the highest grade. I built a for loop that seems to work with all numbers under 9 which is super odd. If anyone selects a highschool it does not populate.

export function populateGrade (parameter) {
    wixData.query("Schools") 
        .eq('schoolName', $w("#iptSchool").value)
        .find()
        .then(results => {
            let uniqueList = createUniqueListGrade(results.items);
            $w("#iptGradeLevel").options = buildOptionsGrade(uniqueList);
        })

    function createUniqueListGrade (items) {
        let lowGrade = items.map(item => item.lowGrade)
        let highGrade = items.map(item => item.highGrade)
        var gradesArray = [];
        for (let i = lowGrade; i <= highGrade; i++) {
            gradesArray.push(i.toString());
            console.log(gradesArray);
        }
        return[...new Set(gradesArray)];
    }

    function buildOptionsGrade (uniqueList) {
        let uniqueListFinal = uniqueList.map(curr => { return {label:curr, value:curr}; });
        uniqueListFinal.push({"label": "Other", "value": "Other"});
        return uniqueListFinal;
    }
2

Is all of this running in the backend?

export function populateGrade(parameter){.........
3

It’s obviously a frontend code as he has selectors in his code.

I’m not sure the foor loop is correct, the iterator should be a number where as yours is an array, also, the loop condition is the length of the high grades array, which doesn’t make any sense to me, and I don’t understand what you’re doing in the grades here, would you please elaborate more.

4

It’s obviously a frontend code as he has selectors in his code.
Damn! You are right → i am stupid xD

5

@ahmadnasriya it is a number not an array. But maybe the way I’m retrieving it makes it an array? What is should be doing is finding the dataset item and then finding all the numbers between low grade and high grade.

For example (low grade is 1 high grade is 6) it should return 1,2,3,4,5,6.

hope this clears it up.

6

@jarod

let lowGrade = items.map(item => item.lowGrade)
let highGrade = items.map(item => item.highGrade)

The lowGrade and highGrade type should be an array (object), as the map( ) method returns an array, not a number, therefore, the iterator in your loop is an array, not a number.

Try adding a console just before the loop and see what you’ll get.

console.group();

console.group();
console.log('lowGrade type:', typeof lowGrade);
console.log('lowGrade value:', lowGrade);
console.groupEnd();

console.group();
console.log('highGrade type:', typeof highGrade);
console.log('highGrade value:', highGrade);
console.groupEnd();

console.groupEnd();
7

:joy::joy::joy:
No worries friend, it happens.

8

@jarod did my answer help you? Did you solve your issue?

9

@ahmadnasriya Yes! Thank you so much. I just used parseInt() to change these values to numbers and this seemed to fix my issue.

10

@jarod glad to hear that. If you need anything in the future just let me know :wink: