update logger page da testare

2021-04-02 14:56:26 +02:00
parent 845c220a52
commit 8f81344efa
1 changed files with 68 additions and 0 deletions
@@ -147,6 +147,74 @@
 
                    <!-- To Do: display contenuto cartella /data e dimensione files -->

+
+                    <input type="button" onclick="CreateTableFromJSON()" value="Create Table From JSON" />
+                    <p id="showData"></p>
+
+                    <script>
+                        function CreateTableFromJSON() {
+                            var myBooks = [
+                                {
+                                    "Book ID": "1",
+                                    "Book Name": "Computer Architecture",
+                                    "Category": "Computers",
+                                    "Price": "125.60"
+                                },
+                                {
+                                    "Book ID": "2",
+                                    "Book Name": "Asp.Net 4 Blue Book",
+                                    "Category": "Programming",
+                                    "Price": "56.00"
+                                },
+                                {
+                                    "Book ID": "3",
+                                    "Book Name": "Popular Science",
+                                    "Category": "Science",
+                                    "Price": "210.40"
+                                }
+                            ]
+                    
+                            // EXTRACT VALUE FOR HTML HEADER. 
+                            // ('Book ID', 'Book Name', 'Category' and 'Price')
+                            var col = [];
+                            for (var i = 0; i < myBooks.length; i++) {
+                                for (var key in myBooks[i]) {
+                                    if (col.indexOf(key) === -1) {
+                                        col.push(key);
+                                    }
+                                }
+                            }
+                    
+                            // CREATE DYNAMIC TABLE.
+                            var table = document.createElement("table");
+                    
+                            // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
+                    
+                            var tr = table.insertRow(-1);                   // TABLE ROW.
+                    
+                            for (var i = 0; i < col.length; i++) {
+                                var th = document.createElement("th");      // TABLE HEADER.
+                                th.innerHTML = col[i];
+                                tr.appendChild(th);
+                            }
+                    
+                            // ADD JSON DATA TO THE TABLE AS ROWS.
+                            for (var i = 0; i < myBooks.length; i++) {
+                    
+                                tr = table.insertRow(-1);
+                    
+                                for (var j = 0; j < col.length; j++) {
+                                    var tabCell = tr.insertCell(-1);
+                                    tabCell.innerHTML = myBooks[i][col[j]];
+                                }
+                            }
+                    
+                            // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
+                            var divContainer = document.getElementById("showData");
+                            divContainer.innerHTML = "";
+                            divContainer.appendChild(table);
+                        }
+                    </script>
                </div>
            </div>
        </div>