jQuery not working without Alert()

Question

Hi Everyone I have written a code to generate html Table from JSON file using jQuery. but the code is not working when I remove the alert() function. Please help me out with the issue. Thanking you all in advance

Bellow is my code

<script>
var a = {};
var b = {};
var i = 1;
var inc = 0;
var j = 9;
$.getJSON(
    'JsonDataBlocks.json',
    function(data) {

        a = data;

        $.each(a, function(idx, elem) {
            alert(inc);
            if (idx == 0) {
                $('table#tbl TBODY')
                    .append('<tr class="treegrid-' + i + ' treegrid-expanded"><td>' + elem.Tops + '</td><td><input type="text" class="info" value="' + elem.Jacket + '" id="' + i + 'a"></input></td><td><input type="text" class="info" value="' + elem.Flap + '" id="' + i + 'b"></input></td><td><input type="text" class="info" value="' + elem.Premium + '" id="' + i + 'c"></input></td><td><input type="text" class="info" value="' + elem.NonPrint + '" id="' + i + 'd"></input></td><td><input type="text" class="info" value="' + elem.Regular + '" id="' + i + 'e"></input></td></tr>');
                i = i + 1;

            } else {
                $('table#tbl TBODY')
                    .append('<tr class="treegrid-' + i + ' treegrid-expanded" id="color"><td class="box">' + elem.Tops + '</td><td class="box"><input type="text" class="info" value="' + elem.Jacket + '" id="' + i + 'a"></input></td><td><input type="text" class="info" value="' + elem.Flap + '" id="' + i + 'b"></input></td><td><input type="text" class="info" value="' + elem.Premium + '" id="' + i + 'c"></input></td><td><input type="text" class="info" value="' + elem.NonPrint + '" id="' + i + 'd"></input></td><td><input type="text" class="info" value="' + elem.Regular + '" id="' + i + 'e"></input></td></tr>');

                $.getJSON('TOI.json', function(data) {
                    b = data;

                    $.each(b, function(index, elem) {
                        if (elem.node == i) {
                            $('table#tbl TBODY').append('<tr id="colorBreak1" class="treegrid-' + j + ' treegrid-parent-' + i + '" ><td>' + elem.Tops + '</td><td><input type="text" class="info" value="' + elem.Jacket + '" id="' + j + 'a"></input></td><td><input type="text" class="info" value="' + elem.Flap + '" id="' + j + 'b"></input></td><td><input type="text" class="info" value="' + elem.Premium + '" id="' + j + 'c"></input></td><td><input type="text" class="info" value="' + elem.NonPrint + '" id="' + j + 'd"></input></td><td><input type="text" class="info" value="' + elem.Regular + '" id="' + j + 'e"></input></td></tr>');

                            j = j + 1;
                        }
                    });
                    i = i + 1;
                });
            }
        });
    });
</script>
<div id="scroll" class="col-xs-12">
    <table id="tbl" class="tree table table-striped table-bordered">
        <thead>
            <tr>
                <th class="header" href="">Tops</th>
                <th class="header">Jacket</th>
                <th class="header">Flap</th>
                <th class="header">Premium</th>
                <th class="header">Non Print</th>
                <th class="header">Regular</th>
        </thead>
        <tbody></tbody>
    </table>
</div>
</body>

</html>

Answer 1

Instead of:

$.getJSON(
'JsonDataBlocks.json',
function(data) {

use:

$.getJSON('JsonDataBlocks.json')
    .done(data) { ... }

and do that for your subsequent $.getJSON call. $.getJSON is asynchronous, so nothing that relies on the data will work unless you implement it after the data is returned.