读取JSON数据的函数未传递给变量

Question

我正在创建一个读取不同JSON文件的函数。问题是当我尝试传递数组时。回到主要功能后，我一直变得“未定义”。读取文件是可行的，但是当我尝试使用变量时，我得到“未定义”。我可以帮忙。谢谢。

这是我读取的文件'data.json'：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    [
        {
    			"code":"10000",
    			"name":"new",
    			"filter":"Office",
    			"label":"NEW"
    	}, 
        {
    			"code":"10001",
    			"name":"classic",
    			"filter":"Office",
    			"label":"CLASSIC"
    	}, 
        {
    			"code":"10002",
    			"name":"old",
    			"filter":"Office",
    			"label":"OLD"
    	}
    ]
    

这是我的代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
    function readfile(myfile) {

        var mydata; 

        $.get(myfile, function (data) {

            mydata = JSON.parse(data);

            console.log(mydata);              // result ok
          
        });
        console.log(mydata);                 // undefined

        return (mydata);                     // return  'undefined'
    }

    var content = readfile('data.json'); //should be an array

    console.log(content); // undefined

Answer 1

Get是异步的，这意味着它不会按照写入的顺序执行。

$.get(myfile, function (data) {

    mydata = JSON.parse(data);

    console.log(mydata);              // result ok

});

这就是原因

console.log(mydata);                 // undefined

return (mydata);    

是未定义的，因为实际上不是从get（）设置值。

Answer 2

$.get调用是异步的，该函数会在设置mydata之前返回它。您可以在读取文件后使用Promise或回调来解决问题。

一个回调示例：

    function readfile(myfile, callback) {

        var mydata; 

        $.get(myfile, function (data) {

            mydata = JSON.parse(data);

            console.log(mydata);      // result ok
            
            callback(mydata);         // function is passed in and called after file is read
        });  
    }

    readfile('data.json', (content) => {
      console.log(content);           //results of file passed to us by the readfile function
    });

    

Answer 3

这是异步方法的默认行为。该值在您尝试读取时不可用。将您的回报移至成功区块内，如下所示：

function readfile(myfile) {
   var mydata; 
   $.get(myfile, function (data) {
      mydata = JSON.parse(data);
      console.log(mydata);              // result ok
      return (mydata);                     // return  'undefined'
   });      
}

Answer 4

您快到了！

jQuery $.get()方法是一个异步调用。这意味着代码不会发出获取myfile的请求，而是等待直到完成，然后再从那里继续执行，而不会发出请求，而是继续在后台完成请求的同时继续执行。

您可以在这里做两件事。

您可以做的第一件事就是简单地在回调函数中移动逻辑，像这样

$.get(myfile, function (data) {
    mydata = JSON.parse(data);
    console.log(mydata); // do whatever you need 
});

但是，如果要继续使用readfile方法，则可以使$ .get请求同步，等待响应，然后从中返回。

例如：

function readfile(myfile) {
   var mydata; 
   $.get({
        url: myfile,
        async: false,
        success: function(data) {
            mydata = data;
        }
   });
   return mydata;
}