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

【问题标题】：handontable is returning blank for my JSON. How do I fix it?handsontable 为我的 JSON 返回空白。我如何解决它？
【发布时间】：2020-02-06 06:57:59
【问题描述】：

我正在使用 handsontable 并获取 json 对象流。当我解析它并将其加载到handontable 中时，我只得到一个空白的 div 容器。我如何解决它？由于某种原因，我不理解第 33 行中的 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>

【问题讨论】：

如果您使用 jquery，请不要忘记包含 jquery 脚本标签或 sn-p 直接导入

标签： javascript handsontable

【解决方案1】：

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

<!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在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>

【讨论】：

非常感谢。我现在需要学习如何使用 Promise。有没有办法，我可以将返回的 json 转换为数组的数组，第一行成为标题？
您的 json 实际上的格式如下codebeautify.org/jsonviewer/cb30658d，“数组数组”是什么意思？数组是什么？
我玩过它，发现我可以将以下内容作为列标题传递。 colHeaders: Object.keys(data1[0]),