Split Json Tree Values into a flat table
This javascript code reads a json object / tree from an input field and transforms it into a simple table for excel.
The code snippet is quite simple
Html page with javascript code
<body style="font-family:Arial"> <h2>Transform Json into Table</h2>
<div style="display:flex;flex-flow:row"> <div style="display:flex;flex-flow:column"> Input Json Nodes: <div id="input_field" contenteditable="true" style="resize: vertical; height: 600px; width: 400px; overflow: auto; border: 1px solid darkgray; padding: 10px; background-color: #FFFFFF;" ></div> </div>
<div style="display:flex;flex-flow:column"> Output Table: <div id="output_field" contenteditable="true" style="resize: vertical; height: 600px; width: 400px; overflow: auto; border: 1px solid darkgray; padding: 10px; background-color: #FFFFFF;"></div> </div> </div>
<button onclick="transform_json()">Transform</button>
</body>
<style> td {
border-style: solid; border-width:1px; padding: 4px; margin:0px; border-color: lightgray; }
</style>
<script> function transform_json() { //--------< testAPI() >--------
//-< init > var input_field = document.getElementById("input_field"); var sinput_json = input_field.innerText;
var output_field = document.getElementById("output_field"); output_field.innerHTML = ""; //-</ init >
//< check > if (sinput_json == "") return; //</ check >
var s_table_body = "";
//*read Json into array const jsonData = JSON.parse(sinput_json);
//------< @Loop: Json-Elements >------ for (var i_element in jsonData) { //----< json_element >---- var json_element = jsonData[i_element]; var ref = json_element.ref; var json_child_values = json_element.values; var value_element = Object.entries(json_child_values)[0][1]; //{abc: '0.123'} var xxx_name = Object.keys(value_element)[0]; //abc var xxx_value = Object.values(value_element)[0]; //'0.123'
var s_row = "<tr><td>" + ref + "</td><td>" + xxx_name + "</td><td>" + xxx_value + "</td></tr>" s_table_body = s_table_body + s_row; //----</ json_element >---- } //------</ @Loop: Json-Elements >------
var sOutput = "<table>" + s_table_body + "</table>";
//-< Output >- output_field.innerHTML = sOutput;
//-</ Output >- //--------</ testAPI() >-------- } </script> |