Question

我想解析一个JSON文件，目的是填充一个数据表组件（由名为“datatables”的jquery扩展提供），但我调用的$ .getJSON方法有一个奇怪的行为：javascript代码似乎不是从顶部到底部运行！

这是我的代码： 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>

事实是警告“tab2：undefined”出现在“tab1：olivier”之前（“olivier”来自JSON文件）。

你可以帮帮我吗？

的问候，

奥利弗

Answer 1

@adeneo是正确的，这是异步行为。如果您希望在代码的其余部分之前运行getJSON，请将代码移动到成功回调中

$(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
        });
    });
});

还有其他方法可以实现这一点，即不使用getJSON快捷方法并调用AJAX并将async设置为false：

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

$ .getJSON：javascript不是从上到下运行

1 个答案: