RBQL web demo

Example code of how to use Rainbow Query Language (RBQL) as a javascript library in browser

by mechatroner

HTML

<html>

<head>
<script src="https://rbql.org/web_rbql.js"></script>
</head>

<body>
<div>
<table id="src_table">
  <tr><th>a1: Name</th><th>a2: Year</th><th>a3: Country</th></tr>
  <tr><td>Roosevelt</td><td>1858</td><td>USA</td></tr>
  <tr><td>Napoleon</td><td>1769</td><td>France</td></tr>
  <tr><td>Dmitri Mendeleev</td><td>1834</td><td>Russia</td></tr>
  <tr><td>Jane Austen</td><td>1775</td><td>England</td></tr>
  <tr><td>Hayao Miyazaki</td><td>1941</td><td>Japan</td></tr>
  <tr><td>Marilyn Monroe</td><td>1926</td><td>USA</td></tr>
  <tr><td>Beethoven</td><td>1770</td><td>Germany</td></tr>
  <tr><td>Louis Armstrong</td><td>1901</td><td>USA</td></tr>
  <tr><td>Confucius</td><td>-551</td><td>China</td></tr>
  <tr><td>Catherine the Great</td><td>1729</td><td>Russia</td></tr>
</table>
<br><input id="query_input" type="text" style="width:500px" placeholder="select ... where ... order by ... limit ... "><button id="run_button">Run</button>
<br><br><table id="dst_table"></table>
</div>

</body>
</html>

CSS

table {
    border-collapse: collapse;
}
table, th, td {
    border: 1px solid black;
}

JavaScript

function read_html_table_without_header(table_element) {
    let result = [];
    for (let r = 1; r < table_element.rows.length; r++) {
        let cells = table_element.rows.item(r).cells;
        let out_record = [];
        for (let c = 0; c < cells.length; c++) {
            out_record.push(cells.item(c).innerHTML)
        }
        result.push(out_record);
    }
    return result;
}

function clear_html_table(table_element) {
    let num_rows = table_element.rows.length;
    for (let i = 0; i < num_rows; i++) {
        table_element.deleteRow(0);
    }
}

function write_html_table(src_array, dst_table_element) {
    for (let r = 0; r < src_array.length; r++) {
        let row = dst_table_element.insertRow(r);
        for (let c = 0; c < src_array[r].length; c++) {
            let cell = row.insertCell(c);
            cell.innerHTML = String(src_array[r][c]);
        }
    }
}

function process_query() {
        let input_table = read_html_table_without_header(document.getElementById('src_table'));
        let output_table = [];
        let warnings = [];
        let user_query = document.getElementById('query_input').value;
        clear_html_table(document.getElementById('dst_table'));

        let error_handler = function(exception) {
            alert('RBQL Query finished with error: ' + String(exception));
        }

        let success_handler = function() {
            if (warnings.length)
                alert('Warnings: ' + warnings.join('\n'))
            write_html_table(output_table, document.getElementById('dst_table'));
        }

        rbql.query_table(user_query, input_table, output_table, warnings, null, ['Name', 'Year', 'Country']).then(success_handler).catch(error_handler);
}


document.getElementById("run_button").addEventListener("click", process_query);