Processing nested arrays in Bootstrap Table

Question

I'm working on a 2000+ entries Zotero database and want to present it publicly using Bootstrap Table.

However, I'm problems with the JSON file, due to the way the Zotero fields work, namely, the author field. Example:

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

This translates as either [Object Object] if I use the "author" field, or I can use the FlatJson extension and use only the nested values (via "author.0.family"), which breaks search and doesn't return all the authors.

Update: see jsfiddle

Answer 1

You should be able to use a row formatter to handle that.

The row header in your table should look something like this:

<th data-field="author" data-formatter="authorFormatter">

Below the javascript that instantiates your bootstrap table, you can add the formatter code. Something like this should make a string with "Barack Obama", though you could format it anyway like you like.

<script>
function authorFormatter(value, row) {
    if ((value) && (value[0].given)) {
        return value[0].given + ' ' + value[0].family;
    }
}
</script>

The formatter functionality in bootstrap tables makes it easy to keep your JSON API clean while displaying the data in the table as needed.

UPDATE

Assuming your JSON looks something like this (based off your example):

{ 
"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" ] 
            ]
    } 

}

Your HTML table would look something like this:

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

And your javascript would look something like this:

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