From 33671683ea3c6ff84bbaf65ab745678aff621b2a Mon Sep 17 00:00:00 2001
From: Cole Deck <cdeck@hawk.iit.edu>
Date: Wed, 17 Jan 2024 09:23:06 -0600
Subject: [PATCH] test rendering json in HTML table format

---
 test.html | 98 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 98 insertions(+)
 create mode 100644 test.html
diff --git a/test.html b/test.html
new file mode 100644
index 0000000..9a8453b
--- /dev/null
+++ b/test.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>JSON to HTML Tables</title>
+    <style>
+        .table-container {
+            margin-bottom: 20px; /* Extra space after each table */
+        }
+        .table-caption {
+            font-weight: bold; /* Bold caption */
+            margin-left: 0;
+            margin-bottom: 5px;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+        table, th, td {
+            border: 1px solid black;
+        }
+        th, td {
+            padding: 8px;
+            text-align: left;
+        }
+        th {
+            background-color: #f2f2f2;
+        }
+    </style>
+</head>
+<body>
+
+<script>
+    // Your JSON data
+    var jsonData = {"Face View Side 1": {"Pin 1": ["brown"], "Pin 2": ["white"], "Pin 3": ["blue"], "Pin 4": ["black"], "FE": ["pink"]}, "Face View Side 2": {"Pin 1": ["brown"], "Pin 2": ["white"], "Pin 3": ["blue"], "Pin 4": ["black"], "FE": ["pink"]}, "Product Description": {"Product Family": "Power Connector", "Brand": "Lumberg Automation", "Connector Type": "Cordset, double ended", "Shielding": "Unshielded", "Rated Voltage": "63 V", "Rated Voltage (UL)": "63 V", "Rated Impulse Voltage": "1.5 kV", "Operating Voltage": "50 V AC / 60 V DC", "Rated Current*": "16 A", "Rated Current (UL)*": "16 A"}, "Technical Data Side 1": {"Product Sub Family": "M12 Power", "Type of Contact / Gender": "male", "Connector Design": "straight", "Attachment Type": "Coupling Screw", "Number of Pins": "5(4+FE)", "Coding": "L", "Contact Resistance": "\u2264 10 mOhm", "Insulation Resistance": "\u02c3 10^9 Ohm", "Mating Cycles": "\u2264 100", "Ambient Temperature (Operation)*": "-40 \u00b0C to +125 \u00b0C, notice derating", "Protection Degree / IP Rating**": "IP65, IP67, IP69K", "Design Standard": "IEC 61076-2-111", "Pollution Degree": "3 acc. to DIN EN 60664-1 (VDE 0110-1)", "Clearance / Creepage Distance": "DIN EN 60664-1 (2008/01); VDE 0110-1", "Overvoltage Category": "III acc. to DIN EN 60664-1 (VDE 0110-1)", "Contact Base Material": "CuNi", "Contact Plating": "Cu/Au", "Contact Bearer Material": "PBT GF", "Contact Bearer Color": "grey", "Flammability Class (Contact Bearer)": "UL 94 V-2", "Molded Body Material": "TPE", "Molded Body Color": "blue", "Flammability Class (Molded Body)": "UL 94 HB", "Attachment Material": "CuZn", "Attachment Plating": "Cu/Ni", "O-Ring Material": "FKM", "Fastening Torque (Contact Screw)": "M 12x1: (50-60) Ncm, hand-tight"}, "Cable Data": {"Cable Number": "949", "Conductor Size": "1.50 mm\u00b2", "Number of Wires": "5", "Minimal Bending Radius (Fixed Inst)": "\u02c3 4 x D", "Minimal Bending Radius (Flexible Inst)": "\u02c3 7.5 x D", "Cycles (Bending)": "\u02c3 10 M", "Conductor material": "Cu", "Cable Jacket Material": "PUR", "Cable Jacket Color": "grey (RAL 7032)", "Cable Diameter D": "\u00f8 8.0 \u00b10.20 mm", "Wire Insulation Material": "PP", "Insulated Wire Diameter": "\u00f8 2.35 mm", "Ambient Temperature (Fixed Installation)": "-40 \u00b0C to +90 \u00b0C (UL AWM 80\u00b0C)", "Ambient Temperature (Flex Installation)": "-30 \u00b0C to +90 \u00b0C (UL AWM 80\u00b0C)", "Ambient Temperature (Fixed Installation short-term 100h)": "-40 \u00b0C to +125 \u00b0C", "Ambient Temperature (Drag Chain Inst)": "-20 \u00b0C to +60 \u00b0C", "UL Cable Type": "AWM: 20939", "Flammability Class (Cable Jacket)": "VDE 0482-332-1-2, DIN EN 60332-1-2 / IEC 60332-1 / UL VW-1, CSA FT1"}, "Technical Data Side 2": {"Product Sub Family, Side 2": "M12 Power", "Type of Contact / Gender, Side 2": "female", "Connector Design, Side 2": "straight", "Attachment Type, Side 2": "Coupling Nut", "Number of Pins, Side 2": "5(4+FE)", "Coding, Side 2": "L", "Contact Resistance, Side 2": "\u2264 10 mOhm", "Insulation Resistance, Side 2": "\u02c3 10^9 Ohm", "Mating Cycles, Side 2": "\u2264 100", "Ambient Temperature (Operation), Side 2*": "-40 \u00b0C to +125 \u00b0C, notice derating", "Protection Degree / IP Rating, Side 2**": "IP65, IP67, IP69K", "Design Standard, Side 2": "IEC 61076-2-111", "Pollution Degree, Side 2": "3 acc. to DIN EN 60664-1 (VDE 0110-1)", "Clearance / Creepage Distance, Side 2": "DIN EN 60664-1 (2008/01); VDE 0110-1", "Overvoltage Category, Side 2": "III acc. to DIN EN 60664-1 (VDE 0110-1)", "Contact Base Material, Side 2": "CuNi", "Contact Plating, Side 2": "Cu/Au", "Contact Bearer Material, Side 2": "PBT GF", "Contact Bearer Color, Side 2": "grey", "Flammability Class (Contact Bearer), Side 2": "UL 94 V-2", "Molded Body Material, Side 2": "TPE", "Molded Body Color, Side 2": "blue", "Flammability Class (Molded Body), Side 2": "UL 94 HB", "Attachment Material, Side 2": "CuZn", "Attachment Plating, Side 2": "Cu/Ni", "O-Ring Material, Side 2": "FKM", "Fastening Torque (Contact Screw), Side 2": "M 12x1: (50-60) Ncm, hand-tight"}, "Approvals": {"UL-File": "E497237", "UL": "UL 2237; cULus", "VDE": "VDE 61984"}, "Safety & Environmental Compliance": {"RoHS Compliant": "yes"}, "Resistances": {"Halogenfree": "DIN VDE 0472 T.815", "Oil Resistance": "HD 22.10 Appendix A, DIN EN 60811-404"}, "Notes": {"Protection Degree / IP Rating Note": "** only if mounted and locked in combination with Hirschmann / Lumberg Automation connector.", "Note Derating": "* Notice derating", "Product Characteristics": "To ensure ingress protection, please check the O-ring\u2019s position before connecting. Improperly positioned O-ring leads to ingress protection potential\nfailure."}, "Variants": {"Item #": ["934853163", "934853164", "934853165", "934853166", "934853167", "934853168"], "Item Description": ["RST 5L-RKT 5L-949/0,3 M", "RST 5L-RKT 5L-949/0,6 M", "RST 5L-RKT 5L-949/1 M", "RST 5L-RKT 5L-949/2 M", "RST 5L-RKT 5L-949/5 M", "RST 5L-RKT 5L-949/10 M"], "Cable Length": ["0.3 m", "0.6 m", "1 m", "2 m", "5 m", "10 m"]}};
+
+    // Function to create a table from an object
+    function createTableFromObject(obj, tableName) {
+        var html = '<div class="table-container">';
+        html += '<div class="table-caption">' + tableName + '</div>';
+        html += '<table>';
+
+        // Determine if the object values are arrays (for columns)
+        var areValuesArrays = Object.values(obj).every(value => Array.isArray(value));
+
+        if (areValuesArrays) {
+            // Handle as columns
+            var keys = Object.keys(obj);
+            var maxLength = Math.max(...Object.values(obj).map(arr => arr.length));
+
+            // Headers
+            html += '<tr>';
+            keys.forEach(key => {
+                html += '<th>' + key + '</th>';
+            });
+            html += '</tr>';
+
+            // Rows
+            for (var i = 0; i < maxLength; i++) {
+                html += '<tr>';
+                keys.forEach(key => {
+                    var value = obj[key][i] || '';
+                    html += '<td>' + value + '</td>';
+                });
+                html += '</tr>';
+            }
+        } else {
+            // Handle as rows
+            html += '<tr><th>Property</th><th>Value</th></tr>';
+            for (var key in obj) {
+                html += '<tr>';
+                html += '<td>' + key + '</td>';
+                html += '<td>' + obj[key] + '</td>';
+                html += '</tr>';
+            }
+        }
+
+        html += '</table>';
+        html += '</div>'; // Close table-container
+        return html;
+    }
+
+    // Function to append the tables to the body
+    function appendTables(jsonData) {
+        var container = document.createElement('div');
+        for (var key in jsonData) {
+            var table = createTableFromObject(jsonData[key], key);
+            container.innerHTML += table;
+        }
+        document.body.appendChild(container);
+    }
+
+
+    // Call the function with your JSON data
+    appendTables(jsonData);
+
+</script>
+</body>
+</html>
\ No newline at end of file
