JSON data rendering in javascript function

Question

I am using bootstrap table to build table with json data dynamically, when i plugged function to consume json from web service the table displays empty rows. I compared the data set and i don't see any errors either. Did anyone face this ? what am i missing ?

Script #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
    });
});

Log

console.log outputs the data as mentioned below, if i compare between hardcoded json vs json from web service it looks identical.

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

Script #2

The same feature works fine if i have variable holding hardcoded json 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"
    }
]

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

View

    <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>

score 3 · Accepted Answer · answered Aug 11 '17 at 16:30

3

$.getJSON is asynchronous, your second function is probably going to run prior to getJSON completing and setting data. The solution is to initialize your table in the getJSON callback:

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

answered Aug 11 '17 at 16:30

Rob M.

35,491
6
51
50

1

that make sense, thank you :) – Mad-D Aug 11 '17 at 16:35
No problem, glad to help! :) – Rob M. Aug 11 '17 at 16:36

score 2 · Answer 2 · answered Aug 11 '17 at 16:31

in script #1, $.getJson is an asynchronous function.

So, following, you need to stick your table initialisation inside the async callback.

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

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

score 2 · Answer 3 · answered Aug 11 '17 at 16:32

/*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
    });

})


});

Because the data variable is not populated until the getJSON finishes. The function call is seeing data data as undefined.

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

score 1 · Answer 4 · answered Aug 11 '17 at 16:40

Because $.getJSON is asynchronous you can use the bootstrapTable load method inside your 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>

JSON data rendering in javascript function

4 Answers4