Bootstrap表创建html div,但不将数据填充到其中

我想使用引导表创建一个表。引导程序似乎根据我的json数据输入创建了正确的行数,但没有用数据本身填充它。

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

这是当前渲染的输出:

enter image description here

和json数据:

enter image description here

json的格式可能会导致此问题,因此可以说bootstrap无法进入json项目的索引吗?如果是这样,该如何解决?有什么方法可以从json中删除id_s,以使引导程序能够读取数据?

我在控制台中没有任何错误。

评论
类敏思
类敏思

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)
点赞
评论