Question

我正在使用2000多个条目Zotero数据库，并希望使用Bootstrap Table公开展示。

但是，由于Zotero字段的工作方式，即作者字段，我对JSON文件存在问题。例如：

"author": [{
    "family": "Obama",
    "given": "Barack"
        }
    ,
        {
    "family": "Obama",
    "given": "Michele"
        }]

如果我使用＆＃34; author＆＃34;它将转换为[Object Object]。字段，或者我可以使用FlatJson扩展并使用仅嵌套值（通过＆＃34; author.0.family＆＃34;），这会破坏搜索并且不会返回所有作者。

更新：请参阅jsfiddle

Answer 1

您应该能够使用行格式化程序来处理它。

表中的行标题应如下所示：

{ 
"type": "chapter", 
"title": "Long title", 
"container-title": "Other title", 
"publisher": "Publisher", 
"publisher-place": "City", 
"page": "XX-XX", 
"source": "Library", 
"ISBN": "XXXXXXXXXXX", 
"container-author": 
    [ 
        { 
            "family": "XXX", 
            "given": "XXX" 
        } 
    ], 
    "author": 
    [
        { 
            "family": "Obama", 
            "given": "Barack" 
        }, 
        { 
            "family": "Obama", 
            "given": "Michelle" 
        } 
    ],
    "issued": 
    { 
        "date-parts": 
            [ 
                [ "2012" ] 
            ]
    } 

}

在实例化引导表的javascript下面，您可以添加格式化程序代码。像这样的东西应该与“Barack Obama”形成一个字符串，尽管你可以像你喜欢的那样格式化它。

<table 
id="table"
class="table table-striped"
data-toggle="table"
data-url="https://url.to.your.json"
data-side-pagination="server">
    <thead>
        <tr>
            <th data-field="author" data-formatter="authorsFormatter">Authors</th>
        </tr>
    </thead>
</table>

引导表中的格式化程序功能可以在您根据需要显示表中的数据时轻松保持JSON API的清洁。

<强>更新

假设您的JSON看起来像这样（基于您的示例）：

<script>
// Initialize the bootstrap-table javascript
var $table = $('#table');
$(function () {
});

// Handle your authors formatter, looping through the 
// authors list
function authorsFormatter(value) {
    var authors = '';

    // Loop through the authors object
    for (var index = 0; index < value.length; index++) {
        authors += value[index].given + ' ' + value[index].family;

        // Only show a comma if it's not the last one in the loop
        if (index < (value.length - 1)) {
            authors += ', ';
        }
    }
    return authors;
}
</script>

您的HTML表格如下所示：

{{1}}

你的javascript看起来像这样：

{{1}}

在Bootstrap表中处理嵌套数组

1 个答案: