handsontable 为我的 JSON 返回空白。我如何解决它？

Question

我正在使用 handsontable 并获取 json 对象流。当我解析它并将其加载到 handontable 中时，我只得到一个空白的 div 容器。我如何解决它？出于某种原因，我不理解第 33 行中的数据 1 在第 38 行中变为空

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/handsontable@7.1.1/dist/handsontable.full.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/handsontable@7.1.1/dist/handsontable.full.min.css" rel="stylesheet"
        media="screen">

</head>

<body>
    <h1> hello world</h1>
    <script src="jquery-3.4.1.js"></script>
    <script>
        $("h1").css("color", "blue");</script>
    <div id="example"></div>
    <div id="example1"></div>
    <script>

        var data1 = new Array()


        var url = "https://api.myjson.com/bins/6ysob";


        fetch(url).then(function (response) {
            response.json().then(function (parsedJson) {
             
                data1 = parsedJson;
            })
        });

        var container1 = document.getElementById('example1');
        console.log('This is the parsed json', data1);
        var hot = new Handsontable(container1, {
            data: data1,
            rowHeaders: true,
            colHeaders: true,
            filters: true,
            dropdownMenu: true
        });


    </script>

</body>

</html>

Answer 1

data1 在第 38 行为空并不奇怪，因为该行是在提取回调之前执行的，您必须这样做：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/handsontable@7.1.1/dist/handsontable.full.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/handsontable@7.1.1/dist/handsontable.full.min.css" rel="stylesheet"
        media="screen">

</head>

<body>
    <h1> hello world</h1>
    <script src="jquery-3.4.1.js"></script>
    <script>
        $("h1").css("color", "blue");</script>
    <div id="example"></div>
    <div id="example1"></div>
    <script>

        var data1 = new Array()


        var url = "https://api.myjson.com/bins/6ysob";


        fetch(url).then(function (response) {
            response.json().then(function (parsedJson) {
             
                data1 = parsedJson;
                var container1 = document.getElementById('example1');
                console.log('This is the parsed json', data1);
                var hot = new Handsontable(container1, {
                    data: data1,
                    rowHeaders: true,
                    colHeaders: true,
                    filters: true,
                    dropdownMenu: true
                });
            })
        });

        


    </script>

</body>

</html>

（我建议你查看一些关于 Promise behavior in js 的文章）

我建议你看一下这段代码（更好的可读性）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/handsontable@7.1.1/dist/handsontable.full.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/handsontable@7.1.1/dist/handsontable.full.min.css" rel="stylesheet"
        media="screen">

</head>

<body>
    <h1> hello world</h1>
    <script src="jquery-3.4.1.js"></script>
    <script>
        $("h1").css("color", "blue");</script>
    <div id="example"></div>
    <div id="example1"></div>
    <script>

        let url = "https://api.myjson.com/bins/6ysob";

        fetch(url).then( resp => resp.json() ).then( json => {
            let container1 = document.getElementById('example1');
            let hot = new Handsontable(container1, {
             data: json,
             rowHeaders: true,
                colHeaders: true,
                filters: true,
             dropdownMenu: true
            });
        });

    </script>

</body>

</html>

handsontable 为我的 JSON 返回空白。我如何解决它？

handontable is returning blank for my JSON. How do I fix it?

javascript

handsontable