web: frontend request backend, bicycle: templates_engine

templates/json2html_template.html

@@ -0,0 +1,40 @@
+        <script src="/js/json2htmltable.js"></script>
+         <script type="text/javascript">
+            window.addEventListener("load", () => {
+                let xhr = new XMLHttpRequest();
+                let api_endpoint = location.protocol + '//' + location.host + '/api' + location.pathname + location.search;
+                table = document.getElementById('table0div');
+                xhr.open('GET', api_endpoint)
+
+                xhr.onload = function() {
+                    table = document.getElementById('table0div');
+                    table.innerHTML = '';
+                    table.appendChild(buildHtmlTable(JSON.parse(xhr.response))); // build table
+
+                    var table = document.querySelector("#table0div > table")
+                    var header = table.rows[0]
+
+                    for (var i = 0, cell; cell = header.cells[i]; i++) {
+                        if (cell.innerText.includes('{{ target_column_name }}')) {
+                            var target_column_id = i;
+                            break;
+                        }
+                    }
+
+                    if (target_column_id == null) { // don't to anything if no action_id in the table
+                        return;
+                    }
+
+                    for (var i = 1, row; row = table.rows[i]; i++) { // append to target column filed href
+                        row.cells[target_column_id].innerHTML = '<td><a href="' + '{{ target_new_url }}' + table.rows[i].cells[target_column_id].innerText + ' ">' + table.rows[i].cells[target_column_id].innerText + '</a></td>';
+                    }
+                }
+
+                xhr.onerror = function() { // происходит, только когда запрос совсем не получилось выполнить
+                    table.innerHTML = 'Loading Error';
+                };
+
+                xhr.send()
+                table.innerHTML = 'Loading...';
+            })
+        </script>