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

I am using handsontable and getting a stream of json objects. When i parse it and load it into handontable, i only get a blank div container. How do i fix it? For some reason that i dont understand data1 in line 33 becomes empty in line 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>

Solution

this is not weird that data1 is empty at line 38 because this line is execute before the callback of the fetch you have to do this :

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

(I recommend you to check some articles on Promise behavior in js)

I recommend you to take a look at this code (better readability) :

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