How to pass variable values to a process to use, using either field workflow variable or using JSON API?

Context

I have a form called allocate lecturer, where the user will select a class and assign a lecturer to that class, currently the system doesn't require the lecturers to have an account in the system so I am fetching their emails from an external API. The process I have only has an email tool. The form uses a JSON API to initiate/start the process, and it's supposed to send an email to the respective lecturer.

Issue

In the email tool, I tried to call the workflow variable as such above, to fetch the lecturer email from the form, but it doesn't seem to work, I am assuming that the way I am trying to get the variable value is incorrect.

I made sure the variable was added to the process also and everything else that is required, but not even the testing email is sending to the respective email.


I tried to use the JSON API that passes variables to the process. I don't think it is working, I assume that is because I logged in as a different role other than "admin"???

Image related > reference.

Below is how I implemented the JSON 

            const testingEmail = "comeonbro1233@gmail.com";  

            function setProcessVariable(processInstanceId, variableName, callback) { 
                // Construct the URL to set the variable using query parameter format  
                const setVariableUrl = `https://joget-iis-dev.apu.edu.my/jw/web/json/workflow/process/variable/${processInstanceId}?${variableName};  
                console.log('Process Variable Set URL:', setVariableUrl);  

                fetch(setVariableUrl, {  
                    method: 'POST',  
                    credentials: 'include', // Important for maintaining session authentication  
                    headers: {  
                        'Content-Type': 'application/json'  
                    }  
                })  
                .then(response => {  
                    // Check if the response is OK  
                    if (!response.ok) {  
                        throw new Error(`HTTP error! status: ${response.status}`);  
                    }  
                    return response.json();  
                })  
                .then(data => {  
                    console.log('Process Variable Set Response:', data);  
                    
                    // Call the callback function if provided  
                    if (typeof callback === 'function') {  
                        callback(null, data);  
                    }  
                })  
                .catch(error => {  
                    console.error('Error setting process variable:', error);  
                    
                    // Call the callback with error if provided  
                    if (typeof callback === 'function') {  
                        callback(error, null);  
                    }  
                });  
            }  

            function startProcess(processDefId, callback) {  
                const startUrl = `https://joget-iis-dev.apu.edu.my/jw/web/json/workflow/process/start/${processDefId}`;  

                fetch(startUrl, {  
                    method: 'POST',  
                    credentials: 'include', // Important for maintaining session authentication  
                    headers: {  
                        'Content-Type': 'application/json'  
                    },  
                    body: JSON.stringify({  
                        callback: null  
                    })  
                })  
                .then(response => {  
                    if (!response.ok) {  
                        throw new Error(`HTTP error! status: ${response.status}`);  
                    }  
                    return response.json();  
                })  
                .then(data => {  
                    console.log('Process Start Response:', data);  
                    if (typeof callback === 'function') {  
                        callback(null, data);  
                    }  
                })  
                .catch(error => {  
                    console.error('Error starting process:', error);  
                    if (typeof callback === 'function') {  
                        callback(error, null);  
                    }  
                });  
            }  





                function saveEdit() {
                    const processInstanceId = "apiit_iis:8:assign_lecturer"; // Replace with actual ID
                    
                    // Set process variable, but continue with process start regardless of outcome
                    setProcessVariable(processInstanceId, testingEmail, (error) => { / / Testing Email is just an example of how I am assuming I should add the variable to the JSON API.
                        if (error) {
                            console.error("Failed to set process variable:", error);
                            // Continue with process start despite error
                        }
                        
                        // Start process regardless of setProcessVariable outcome
                        startProcess(processInstanceId, (error, data) => {
                            if (error) {
                                console.log("Failed to start process:", error);
                            } else {
                                console.log("Process started successfully:", data);
                            }
                        });
                    });
                }

I just hope to find a way to pass the variable to process, I might want to pass other variables not just the email. but related data that I get from the form to pass to the email and send it as content etc...