Question

我正在尝试从如下所示的远程URL加载数据：

const getPeople = async () => {
            const data = await fetch('https://randomurl', {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',                                  
                }
            });
            const jsondata = await data.json();
            console.log(jsondata);
            return jsondata;
        }

这是我的数据表：

    $(document).ready(function () {

        var table = $("#records").DataTable({

            data: getPeople(),
            columns: [

                {
                    data: "NAME",
                },

                {
                    data: "SCHOOL",
                },
                {
                    data: "CLASS"
                },
                {
                    data: "CITY"
                }
            ]
        });
    });

加载页面时没有出现任何错误。但是，我的数据表为空。我已验证getPeople（）函数确实返回json数据。我有什么想念的吗？

console.log（jsondata）在创建数据表后2或3秒显示数据。那么如何在获取数据后如何显示/创建数据表？

这是返回的json：

[
 {"NAME":"joe","SCHOOL":"Rogers","CLASS":8,"CITY":"Sisily"},
 {"NAME":"sam","SCHOOL":"Matt","CLASS":6,"CITY":"Monaco"}
]

Answer 1

在收到JSON响应后，调用该函数初始化数据表应该可以。

     $(document).ready(function () {
           var asyncData;
           getdata();
           function getdata(){
              const getPeople = async () => {
               const data = await fetch('https://api.myjson.com/bins/y53hs', {
                  method: 'GET',
                  headers: {
                      'Content-Type': 'application/json',                                  
                  }
               });
               const jsondata = await data.json();
               asyncData=jsondata.data;
               initialiseTable();
               return jsondata;
               };
             getPeople();
           }

          function initialiseTable(){
             var table = $("#records").DataTable({
                 data: asyncData,
                 columns: [
                   {
                      data: "NAME",
                   },

                   {
                         data: "SCHOOL",
                     },
                     {
                         data: "CLASS"
                     },
                     {
                         data: "CITY"
                     }
                  ]
            });
         }
        });

在https://jsfiddle.net/ourqh9ts/2/上工作的小提琴

Answer 2

尝试一下：

const getPeople = async () => {
        const data = await fetch('https://randomurl', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',                                  
            }
        });
        const jsondata = await data.json();
        console.log(jsondata);
        return jsondata;
    }


$(document).ready(function () {
    var xdata = getPeople();
    var table = $("#records").DataTable({

        data: xdata,
        columns: [

            {
                data: "NAME",
            },

            {
                data: "SCHOOL",
            },
            {
                data: "CLASS"
            },
            {
                data: "CITY"
            }
        ]
    });
});

在Jquery Datatable中加载异步数据

2 个答案: