Как правильно добавить прослушиватель событий в серию асинхронных функций в Javascript/JQuery? ⇐ Jquery

[Anonymous]

Я не могу разобраться с порядком операций с асинхронными функциями и прослушивателями событий в Javascript. У меня есть сценарий с функцией, которая извлекает список публично торгуемых компаний из конечной точки API («api/company_list»). После возврата данных он динамически обновляет раскрывающееся меню со списком символов и названий компаний, а также отображает название первой компании в массиве данных на веб-странице. Наконец, он передает символ этой первой компании в качестве литерала шаблона на другой URL-адрес, чтобы получить данные о ценах этой компании из второй конечной точки API и отобразить их на диаграмме.
Я могу выполнить выше, просто выбрав первую возвращенную компанию из данных списка компаний, используя ее индекс (data[0].symbol) при загрузке страницы.
Но что мне нужно знать, так это то, как это сделать Я включаю прослушиватель событий, чтобы при другом компания выбрана из раскрывающегося списка, она обновляет название компании на веб-странице и передает вновь выбранный символ на второй URL-адрес («api/price_data») для выбора данных диаграммы?
И могу ли я сделать все это в одном скрипте?
Я могу сделать один скрипт, который запускает приведенный ниже код при загрузке страницы, и второй скрипт, который запускает тот же код, инкапсулированный внутри функция, которая запускается при изменении выбора в раскрывающемся списке, но это казалось очень дублирующий. Должен быть способ упростить это.
Я пробовал добавить прослушиватель событий onChange для моего раскрывающегося списка («mySelect») в приведенном ниже коде, но поскольку раскрывающийся список заполняется динамически как часть обещания, данные еще не доступны для использования, когда я пытался получить только что выбранное значение и передать его как на страницу, так и на второй URL-адрес. Очевидно, я неправильно понимаю асинхронные функции потока.
Мне кажется, что это, вероятно, довольно простое решение, но до сих пор я не смог найти решение. Заранее спасибо за вашу помощь. Буду рад предоставить дополнительную информацию или ответить на любые вопросы.
function getData(url) {
return fetch(url)
.then(response => {
if(!response.ok) {
throw new Error('Bad Network Request');
}
return response.json();
})
.catch(error => {
console.error('Fetch error:', error);
throw error;
});
}

//fetch the list of companies from an API endpoint and dynamically populate the dropdown list:
getData('/api/company_list')
.then(function myFunction(data) {
let option = '';
for (let i = 0; i < data.length; i++) {
option += '' + data.stock_rank + ' - ' + data.company_name + ' (' + data.symbol + ')' + '';
}

const inputElement = $("#mySelect");
inputElement.append(option);

let firstCompany = data[0].symbol;

$("company").html(data[0].company_name);

const priceUrl = `/api/price_data/?symbol=${firstCompany}`;

getData(priceUrl)
.then(function myFunction(priceData) {

//add the price data to a chart
});
});



Подробнее здесь: https://stackoverflow.com/questions/792 ... unctions-i