CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap
JSRB
JSRB

Reputation: 2613

Bootstrap table creates html divs but doesnt populate the data into them

I want to create a table using bootstrap table. It seems that bootstrap creates the correct amount of rows according to my json data input, but it doesn't populate it with the data itself.

// Javascript

function getStocksData () {
    $.ajax('getStocksAvailable/', {
        method: 'GET',
        async: "True",
        dataType: "json",
        success: function (response) {
            var received_data = response.data;
            console.log(received_data);

            $('#stocksTable').bootstrapTable({
              columns: [{
                field: 'stockName',
                title: 'Company'
              }, {
                field: 'priceLast',
                title: 'Last'
              }],
              data: received_data
            });
        }
    });
};

getStocksData();

// html

<div id="tableWrapper">
    <table id="stocksTable"></table>
</div>

This is the currently rendered output:

enter image description here

And the json data:

enter image description here

Might the format of the json cause the issue, so to say that bootstrap is not able to enter into the indexes of the json items? If so, how to work around this? Any way to remove the id_s from the json in order to enable bootstrap to read the data?

I don't get any errors in the console.

Upvotes: 0

Views: 148

Answers (1)

Robin Zigmond
Robin Zigmond

Reputation: 18249

It seems that the bootstrapTable method expects the data passed to it to be an array of objects (which yours is), where each object contains the properties specified in the field properties of the columns you specify. Unfoe, your data doesn't fit this pattern, as the objects with the properties you want are held within the fields property of the top level objects.

If you can't change how your API returns this data, the solution on the javascript side is to use map to get those "field" objects to the top level, like this:

data: received_data.map(item => item.fields)

Upvotes: 1

Related Questions