jQuery on Change函数内的Javascript异步函数返回undefined [英] Javascript async function inside jQuery on Change function returns undefined

问题描述

如何在jQuery .change函数中调用异步函数？

 异步函数getData（）{
尝试以下方法并返回未定义... 
 {
 return await $ .getJSON（'./ data.json'）。promise（）; 
} catch（error）{
 console.log（error+ error）; 
抛出错误; 
}终于{
 alert（done）; 
 
 
  

这里是一个JSON的例子：

  {
stuff：{
First：{
FirstA：{
year：[2007,2008,209,2010,2011,2013,2014,2015,2016,2017]，
类别：[暂停，电气，性能 ，电机] 
}，
FirstB：{
year：[2007,2008,2009,2010,2011,2012]，
Categories： [Suspension，Electrical，Performance，Motor] 
} 
}，
Second：{
SecondA：{
 年：[2002,2003,2004,2005,2006]，
类别：[暂停，电气，性能，电机] 
}，
SecondB：{
year：[2007,2008,2009,2010,2011,2012]，
Categories：[暂停，电气，性能，电机] 
} 
} 
} 
} 
  

以下是jQuery函数：

  $（'select [name =make]'）。change（function（）{
 
 //首先返回或第二个
 let makeSelected = $（'select [name =make] option：selected'）。val（）; 
 
 getData（）。then（data => {
 let topModels = data.stuff; 
 
 // THIS RETURNS UNDEFINED 
 console.log （topModels.makeSelected）; 
 
 //这将返回正确的数据
 console.log（topModels.First）; 
}）; 
 
}）; 
  

let变量不能用于第一个console.log？

解决方案

一切都应该正常工作，但是您正在访问数据中不存在的属性（makeSelected） 。东东。通过使用 data.stuff.makeSelected 这就是你所要求的。现在，如果你想要做的是寻找一个名称等于变量makeSelected内的值的属性，你有两个主要路径可供选择：

1）使用eval：可以像 let str =data.stuff。+ makeSelected; let result = eval（str）;

<2>您可以使用 [] 符号访问JS对象属性，就像 let result = data.stuff [makeSelection]; 这是我的首选解决方案。

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?

解决方案

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.

这篇关于jQuery on Change函数内的Javascript异步函数返回undefined的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！