La fonction asynchrone Javascript dans jQuery lors de la modification de la fonction renvoie undefined

Comment appeler une fonction asynchrone dans une fonction jQuery .change? J’ai essayé le suivant et il me retourne “indéfini” …

async function getData(){ try { return await $.getJSON('./data.json').promise(); } catch(error) { console.log("error" + error); throw error; } finally { alert("done"); } } 

Voici un exemple du JSON:

 { "stuff": { "First": { "FirstA": { "year": [2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017], "Categories": ["Suspension", "Elecsortingcal", "Performance", "Motor"] }, "FirstB": { "year": [2007, 2008, 2009, 2010, 2011, 2012], "Categories": ["Suspension", "Elecsortingcal", "Performance", "Motor"] } }, "Second": { "SecondA": { "year": [2002, 2003, 2004, 2005, 2006], "Categories": ["Suspension", "Elecsortingcal", "Performance", "Motor"] }, "SecondB": { "year": [2007, 2008, 2009, 2010, 2011, 2012], "Categories": ["Suspension", "Elecsortingcal", "Performance", "Motor"] } } } } 

Et voici la fonction jQuery:

 $('select[name="make"]').change(function(){ // THIS LET RETURNS EITHER First or Second let makeSelected = $('select[name="make"] option:selected').val(); getData().then(data => { let topModels = data.stuff; // THIS RETURNS UNDEFINED console.log(topModels.makeSelected); // THIS RETURNS THE CORRECT DATA console.log(topModels.First); }); }); 

Comment se fait-il que la variable let ne fonctionne pas pour le premier fichier console.log?