$.getJSON : javascript not run from top to bottom

Question

I would like to parse a JSON file with the purpose of filling a datatable component(provided by a jquery extension named "datatables"), but the $.getJSON method I call has a strange behaviour : the javascript code seems not to be run from the top to the bottom!

here is my code: Le titre du document

    <style type="text/css" title="currentStyle">
        @import "js/media/css/demo_table.css";

        #autour {
            width: 400px;
            height: 200px;
        }
        #table_id {
            width: 100%;
            height: 100%;
        }

    </style>

    <script src="js/media/js/jquery.js"></script>
    <script src="js/media/js/jquery.dataTables.js"></script>

    <script type="text/javascript">
        function init(){
        var tab1;
        $.getJSON('test2.json', function(json) {
            alert("json:"+json.personnes.personne[0].name);
            tab1 = json;
        });

        alert("tab1:"+tab1);
        var tab2 = [];
        $.each(tab1.personnes.personne, function(index, val) {
            tab2.push([val.name, val.age]);
        });

        $(document).ready(function() {
            $('#table_id').dataTable({
                "aaData" : tab2,
                "bFilter" : false
            });
        });
}
    </script>

</head>
<body onload="init();">
    <!-- Une ou plusieurs balises HTML pour définir le contenu du document -->

    <div id="autour">
        <table id="table_id">
            <!--<thead>
                <tr>
                    <th>Column 1</th>
                    <th>Column 2</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Row 1 Data 1</td>
                    <td>Row 1 Data 2</td>
                </tr>
                <tr>
                    <td>Row 2 Data 1</td>
                    <td>Row 2 Data 2</td>
                </tr>
            </tbody>-->
        </table>
    </div>

</body>

and the fact is that the alert "tab2:undefined" appears BEFORE "tab1:olivier"("olivier" comes from the JSON file).

can you help me?

regards,

olivier

It is being executed top to bottom. – Kevin B Nov 22 '13 at 18:23 — Kevin B, Nov 22 '13 at 18:23

score 1 · Accepted Answer · answered Nov 22 '13 at 18:24

@adeneo is correct, this is asynchronous behavior. If you are wanting getJSON to be run before the rest of your code, move your code into the success callback

$(document).ready(function() {
    $.getJSON('test2.json', function(json) {
        alert("json:"+json.personnes.personne[0].name);
        tab1 = json;

        alert("tab1:"+tab1);
        var tab2 = [];
        $.each(tab1.personnes.personne, function(index, val) {
            tab2.push([val.name, val.age]);
        });

        $('#table_id').dataTable({
            "aaData" : tab2,
            "bFilter" : false
        });
    });
});

There are other ways to accomplish this, namely not using the getJSON shortcut method and calling AJAX with async set to false:

$.ajax({
   url: 'test2.json',
   type: 'json',
   async: false,
   success: function(data){
      // assign data here
   }
})

thank you for all of you, the answer was very quick and move the rest of the code in the callback function solved my problem! — lolveley, Nov 22 '13 at 18:44

$.getJSON : javascript not run from top to bottom

1 Answers1