Как правильно добавить прослушиватель событий в серию асинхронных функций в 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