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

snipe · Accepted Answer · 2017-01-19 02:30:43Z

5

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>

edited Jan 19, 2017 at 2:30

answered Jan 18, 2017 at 14:30

snipe

5082 gold badges10 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

east1999 Over a year ago

This is absolutely what I was looking for, thank you so much. However, I do have one question: this will return "Barack Obama" but not "Barack Obama, Michelle Obama". Do you know how to add to the function so that all entries under "authors" are returned?

snipe Over a year ago

It's hard to say, without seeing the entire format of the JSON, but I assume it looks something like this: - book 1 - author 1 - author 2 - book 2 - author 1 - author 3 etc? If so, you'll want to just run that through a loop in the formatter using $.each(), going through each index. **Edit: **Argh.... the formatting is getting screwed up. Let me come up with a jsfiddle or something.

east1999 Over a year ago

Example of a field:

{ 		"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": "XXX", 				"given": "XXX" 			}, 			{ 				"family": "XXX", 				"given": "XXX" 			} 		], 		"issued": { 			"date-parts": [ 				[ 					"2012" 				] 			] 		} 	}

east1999 Over a year ago

This works! I was getting an 'undefined' error when searching but that probably had to do some of the entries not having authors, but editors instead. An added "if" took care of it. Thank you so much for your time!! I had moved to using Datatables and ended up developing a good lot of the project there. I will either go back to this or try to apply this solution there (it's always the same problem with those damn arrays).

gawkface Over a year ago

my problem statement was a tad different in the sense that it required columns to be populated from nested json array so using your solution as a guide, I made it worked as shown in the jsfiddle code: http://jsfiddle.net/harshvchawla/xfndb16f (load over http rather than https)

|

Collectives™ on Stack Overflow

Processing nested arrays in Bootstrap Table

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related