98 lines
7.6 KiB
HTML
98 lines
7.6 KiB
HTML
<!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> |