'How to open and makes query to sqlite database with JavaScript

I'm trying to do a client-side database visualizer with JS. I have never used JavaScript for doing this type of stuff, so I searched online and I found out this web page. This is the script that I have done.

<html>
    <head>
        <script>
            function handleFiles(files)
            {
                var file = files[0];
                var reader = new FileReader();
                reader.readAsBinaryString(file);
                openSqliteDb(reader);
            }
            
            function openSqliteDb(reader)
            {
                setTimeout(function () {
                    if(reader.readyState == reader.DONE)
                    {
                        var database = SQL.open(bin2Array(reader.result));
                        document.write("2");
                        executeQuery("SELECT * FROM User", database);
                    }
                    else
                    {
                        openSqliteDb(reader);
                    }
                }, 500);
            }
            
            function executeQuery(commands, database)
            {
                document.write("1");
                commands = commands.replace(/n/g, '; ');
                try {
                    var data = database.exec(commands);
                    document.write(data);
                    processData(data);
                } catch(e) {
                    console.log(e);
                }
            }
            
            function processData(data)
            {
                document.write("1");
                var colHeaders = [];
                var colMap = {};
                var tableContent = [];
                var tableHtml = [];
                tableHtml.push("<table border='1' cellspacing='2' cellpadding-'3'>");
                for (var i = 0; i < data.length; i++) {
                    tableContent.push("<tr>");
                    var dataElem = data[i];
                    if (dataElem instanceof Array) {
                        for (var j = 0; j < dataElem.length; j++) {
                            var element = dataElem[j];
                            if (element.column && !colMap[element.column]) {
                                colHeaders.push("<th>" + element.column + "</th>");
                                colMap[element.column] = colHeaders.length;
                                tableContent.push("<td>&nbsp;" + element.value + "</td>");
                            } else {
                                tableContent.push("<td>&nbsp;" + element.value + "</td>");
                            }
                        }
                    } else {
                        if (element.column && !colMap[element.column]) {
                            colHeaders.push(element.column);
                            colMap[element.column] = colHeaders.length;
                        }
                    }
                    tableContent.push("</tr>");
                }
                tableHtml.push(colHeaders.join(" "));
                tableHtml.push(tableContent.join(" "));
                tableHtml.push("</table>");
                document.getElementById("table").innerHTML = tableHtml.join(" ");
            }
        </script>
    </head>
    <body>
        
        <input type="file" id="input" onchange="handleFiles(this.files)">
    </body>
    </html>

I can't figure it out why it is not working, but I think that the problem is the line var database = SQL.open(bin2Array(reader.result)); in the openSqliteDb() function. Can somebody help me?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source