在JavaScript函数中呈现JSON数据

Question

我使用引导表动态地使用json数据构建表，当我插入函数以从Web服务使用json时，表显示空行。我比较了数据集，也没有看到任何错误。有没有人遇到过这个？我错过了什么？

脚本＃1

var data; 
$.getJSON("http://xxxxxxxx:8073/data-list", function(json){ 
    data = json; 
    console.log(" data : "+JSON.stringify(data)); 
}); 

/*function to load data to first nav tab map*/ 
$(function() { 
    $('#table').bootstrapTable({ 
     data: data 
    }); 
}); 

登录

的console.log输出该数据如下面所提到的，如果我硬编码JSON之间比较VS从web服务JSON它看起来是相同的。如果我有可变的保持硬编码的JSON数据

data : [{"index":1,"name":"MATT","company":"APPLE","key":"123333","description":"Node check"},{"index":2,"name":"Steve","company":"Zynga","key":"124333","description":"Game check"}] 

脚本＃2

同样的功能工作正常。

var data = 
[ 
    { 
     "index": 1, 
     "name": "MATT", 
     "company": "APPLE", 
     "key": "123333", 
     "description": "Node check" 
    }, 
    { 
     "index": 2, 
     "name": "Steve", 
     "company": "Zynga", 
     "key": "124333", 
     "description": "Game check" 
    } 
] 

$(function() { 
    $('#table').bootstrapTable({ 
     data: data 
    }); 
}); 

查看

<tr> 
     <th class="col-md-5 col-xs-5" data-field="name" data-sortable="true">Name</th> 
     <th class="col-md-4 col-xs-4" data-field="company" data-sortable="true">Work (Authority)</th> 
     <th class="col-md-3 col-xs-3" data-field="key" data-sortable="true">Magic Key</th> 
    </tr> 

Answer 1

$.getJSON是异步的，你的第二个功能很可能将之前getJSON完成并设置data运行。解决的办法是初始化表中getJSON回调：

var data; 
/*function to load data to first nav tab map*/ 
$(function() { 
    $.getJSON("http://xxxxxxxx:8073/data-list", function(json){ 
     data = json; 
     console.log(" data : "+JSON.stringify(data)); 
     $('#table').bootstrapTable({ 
      data: data 
     }); 
    }); 
}); 

Answer 2

在脚本＃1，$.getJson是一个异步函数。

所以，下面，你需要坚持你的表初始化内异步回调。

var data; 
$.getJSON("http://xxxxxxxx:8073/data-list", function(json){ 
    data = json; 
    console.log(" data : "+JSON.stringify(data)); 

    $('#table').bootstrapTable({ 
     data: data 
    }); 
}); 

Answer 3

/*function to load data to first nav tab map*/ 
$(function() { 
    $.getJSON("http://xxxxxxxx:8073/data-list", function(json){ 
    data = json; 
    console.log(" data : "+JSON.stringify(data)); 
}).then(function(data) { 
$('#table').bootstrapTable({ 
     data: data 
    }); 

}) 


}); 

由于数据变量未填充，直到完成的getJSON。该函数调用将数据数据视为未定义。

http://api.jquery.com/jquery.ajax/

Answer 4

由于$ .getJSON是异步的，你可以使用bootstrapTable load方法您的getJSON中：

$('#table').bootstrapTable('load', data); 

var data =[ 
 
      { 
 
       "index": 1, 
 
       "name": "MATT", 
 
       "company": "APPLE", 
 
       "key": "123333", 
 
       "description": "Node check" 
 
      }, 
 
      { 
 
       "index": 2, 
 
       "name": "Steve", 
 
       "company": "Zynga", 
 
       "key": "124333", 
 
       "description": "Game check" 
 
      } 
 
     ]; 
 
$('#table').bootstrapTable({ 
 
}); 
 

 
//$.getJSON("http://xxxxxxxx:8073/data-list", function(json){ 
 
    //data = json; 
 
    //console.log(" data : "+JSON.stringify(data)); 
 

 
    $('#table').bootstrapTable('load', data); 
 
//});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css"> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script> 
 

 

 
<table id="table"> 
 
    <thead> 
 
    <tr> 
 
     <th class="col-md-5 col-xs-5" data-field="name" data-sortable="true">Name</th> 
 
     <th class="col-md-4 col-xs-4" data-field="company" data-sortable="true">Work (Authority)</th> 
 
     <th class="col-md-3 col-xs-3" data-field="key" data-sortable="true">Magic Key</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody></tbody> 
 
</table>