handontable возвращает пустое значение для моего JSON. Как мне это исправить? - PullRequest
Новая
       12

handontable возвращает пустое значение для моего JSON. Как мне это исправить?

1 голос
/ 09 октября 2019

Я использую handsontable и получаю поток объектов json. Когда я анализирую его и загружаю в handontable, я получаю только пустой контейнер div. Как мне это исправить? По какой-то причине я не понимаю, что data1 в строке 33 становится пустым в строке 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>

1 Ответ

0 голосов
/ 09 октября 2019

это не странно, что 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 поведении в 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>
...