Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0

Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User

code to Split Json Tree Values into a flat table

06.04.2022 (👁8693)

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>