Javascript async function inside jQuery on Change function returns undefined

Question

How can I call an async function inside a jQuery .change function? I have tried the following and it returns me "undefined"...

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

Here an example of the JSON:

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

And Here is the jQuery function:

$('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);
      });

   });

How come the let variable does not work for the first console.log?

right, but I would assume that the variable value would take its place ie.: First or Second...no? — Sergio, Dec 30 '17 at 18:56
@Axnyff How would that help??? `topModels` doesn't have a property `makeSelected` — Charlie Fish, Dec 30 '17 at 18:57
He wants to access the property whose key is the value of makeSelected: `topModels[makeSelected]`, note `topModels["makeSelected"]` — Axnyff, Dec 30 '17 at 18:59
@Axnyff that actually works... seems weird to use [ ] to access an object property instead of a .(dot) — Sergio, Dec 30 '17 at 19:01
The dot notation is a shortcut: a.method is the same as a["method"] — Axnyff, Dec 30 '17 at 19:03
aaahh... never knew that. Can the dot and square bracket notation be used interchangeably in arrays and objects? — Sergio, Dec 30 '17 at 19:04
@CharlieFish: `topModels[makeSelected]` isn't looking for a property called `makeSelected` on `topModels`. It's looking for a property whose name is the **value** of `makeSelected` in `topModels`. E.g.: `var u = {answer: 42}; var name = "answer"; console.log(u[name]); // 42` — T.J. Crowder, Dec 31 '17 at 09:59

score 1 · Accepted Answer · answered Dec 30 '17 at 19:07

Everything should work fine, but you are acessing a property ("makeSelected") that doesn't exist on the "data.stuff". By using data.stuff.makeSelected that's what you're asking for. Now, if what you intent to do is to look for a property with the name equal to the value inside the variable "makeSelected", you have 2 main paths to choose from:

1) Use "eval": You can build a string just like let str = "data.stuff."+makeSelected; let result = eval(str);

2) You could use the [] notation to access an JS object properties, just like let result = data.stuff[makeSelection]; which is my prefered solution.

#2 worked perfectly for me. Thanks. – Sergio Jan 03 '18 at 21:46 — Sergio, Jan 03 '18 at 21:46

Javascript async function inside jQuery on Change function returns undefined

1 Answers1

Linked