JSFiddle - React, Tailwind, and code Playground

by Thomas Langston

HTML

<div class="container">
    <h2>IMS</h2>
    <label>Input JSON:</label>
    <button id="sample" style="float: right">Sample JSON</button>
    <textarea id="inputJson" style="width: 100%; height: 200px;"></textarea>
    <br/>
    <label>Provider :</label>
    <input id="provider" type="text" value="COMCAST_OO"/>
    <br/>
    <label>Broadcast Week :</label>
    <input id="week" type="text" value="2015-07-20 00:00:00.000"/>
    <br/>
    <br/>
    <br/>
    <button id="generate">Generate SQL</button>
    <br/>
    <br/>
    <label>SQL:</label>
    <textarea id="outputSQL" style="width: 100%; height: 200px;"></textarea>
    <br/>
    <br/>
    <label>Length :</label>
    <label id="length"></label>
    <br/>
    <br/>
    <table class="table table-striped table-hover table-bordered">
        <thead>
            <tr>
                <th>id</th>
                <th>isci</th>
                <th>length</th>
                <th>lsid</th>
                <th>message</th>
                <th>rid</th>
                <th>status</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    
</div>

JavaScript

$(document).on('click', '#sample', function () {
        var sampleJson = [
            {
                "id": "35413",
                "isci": "XPS35001439H",
                "length": "30",
                "lsid": "NY100000003",
                "message": "",
                "rid": "13",
                "status": "pending"
            },
            {
                "id": "35414",
                "isci": "XPS35001439H",
                "length": "30",
                "lsid": "NY100000003",
                "message": "",
                "rid": "16",
                "status": "pending"
            }];

        $("#inputJson").val(JSON.stringify(sampleJson));
    });

    $(document).on('click', '#generate', function() {
        var items = $.parseJSON($("#inputJson").val());

        var query = '';
        for (var i in items) {
            var row = "<tr><td>"
                + items[i].id + "</td><td>"
                + items[i].isci + "</td><td>"
                + items[i].length + "</td><td>"
                + items[i].lsid + "</td><td>"
                + items[i].message + "</td><td>"
                + items[i].rid + "</td><td>"
                + items[i].status + "</td></tr>";
            $("tbody").append(row);

            query += 'INSERT INTO ImsApiOrder  VALUES (' 
                + items[i].id
                + ", '" + items[i].isci + "'"
                + ', ' + items[i].length
                + ", '" + items[i].lsid + "'"
                + ", ''"
                + ", '" + items[i].status + "'"
                + ', getdate()'
                + ', getdate()'
                + ", '" + $('#week').val() + "'"
                + ", '" + $('#provider').val() + "'"
                + ', 1687'
                + ', 0'
                + ')\n';
        }

        $('#outputSQL').val(query);
        $('#length').text(items.length);
    });