Intelligent Advisor

I am experiencing an issue where a dropdown menu intended to display a list of cities based on the selected state is not being updated correctly in our application. The state data is being fetched successfully, but the dropdown UI does not reflect the updated city list.

Steps to Reproduce:

1. State Selection: When a user selects a state from the state dropdown menu, it triggers an event to fetch cities for the selected state.
2. Data Fetching: The application fetches city data from an API based on the selected state.
3. Dropdown Update: The fetched city data is supposed to be populated into the city dropdown menu.

Expected Behavior:

• Upon selecting a state, the dropdown menu for cities should be populated with the city names corresponding to the selected state.

Actual Behavior:

• The city data is successfully fetched and logged in the console.
• The dropdown menu does not update with the new city options.

Custom Javascript extension Code involved for CITY

var selectedState;
var myProducts = [];
function updateCityDataDropdown(interview, state) {
console.log("Fetching data for state: " + state);

const requestOptions = {
method: "GET",
redirect: "follow"
};

fetch(`url`, requestOptions)
.then((response) => response.json())
.then((data) => {
console.log("Response data: ", data); // Log response data

// Clear previous options
myProducts = [];

// Extract the items array
const items = data.items;

// Populate dropdown options
items.forEach((item) => {
const myProductInstance = {
text: item.city.toString(),
value: item.city.toString()
};
myProducts.push(myProductInstance);
});

console.log("List of products now ready: ", myProducts);

// Notify OPA to refresh dropdown options
interview.update(); // Update all controls to reflect the new data
})
.catch((error) => console.error("Error fetching data:", error));
}

// Add extension to handle control changes and provide custom options
OraclePolicyAutomation.AddExtension({
onChange: function(evt) {
var interview = evt.interview;
var control = evt.control;

// Check if the changed control is the one we're interested in (State selection)
if (control.getProperty("Statedata") === "xOptionsParent") {
console.log("State changed: " + evt.value); // Log the selected state
selectedState = evt.value; // Store the selected state

// Fetch cities for the selected state
updateCityDataDropdown(interview, selectedState);
}
},
customOptions: function (control, interview) {
// Debug log to confirm the function execution
console.log("Custom Options Extension called with Citydata: " + control.getProperty("Citydata"));

if (control.getProperty("Citydata") === "xOptionsParent1") {
// Log the options being returned
console.log("Returning options:", myProducts);
return {
options: myProducts.length > 0 ? myProducts : [{ text: "Loading...", value: "" }],
controlType: "Dropdown"
};
}
}
}); 

Request:

Please assist in identifying why the dropdown menu is not being updated with the new city data. If there are additional steps or methods to refresh the dropdown UI specifically, your guidance would be appreciated.

Thank you for your assistance!