javascript函数中的JSON数据呈现[重复]答案

【问题标题】：JSON data rendering in javascript function [duplicate]javascript函数中的JSON数据呈现[重复]
【发布时间】：2018-01-20 05:46:24
【问题描述】：

我正在使用引导表动态构建包含 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 与来自 Web 服务的 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

如果我有保存硬编码 json 数据的变量，同样的功能也可以正常工作。

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>

【问题讨论】：

标签： javascript jquery json twitter-bootstrap

【解决方案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
       });
    });
});

【讨论】：

有道理，谢谢:)
没问题，很高兴为您提供帮助！ :)

【解决方案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
    });
});

【讨论】：

【解决方案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/

【讨论】：

【解决方案4】：

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

$('#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>

【讨论】：