I have a project that involves working with JSON data to display information using BootStrap Tabs categorized by different categories.
Sample JSON data:
"result": [
{
category: "A",
price: "499.00",
productName: "AAA",
productConfig: {
specs: "Lorem ipsum",
creditAllowed: false,
description: "blah blah",
...
}
},
{
category: "A",
price: "479.00",
productName: "AAB",
productConfig: {
specs: "Lorem ipsum",
creditAllowed: true,
description: "blah blah",
...
}
},
{
category: "B",
price: "1299.00",
productName: "BBB",
productConfig: {
specs: "Lorem ipsum",
creditAllowed: true,
description: "blah blah",
...
}
},
{
category: "A",
price: "359.00",
productName: "AXX",
productConfig: {
specs: "Lorem ipsum",
creditAllowed: true,
description: "blah blah",
...
}
},
]
To showcase this data, I need to utilize ng-repeat within my BootStrap tabs.
This is the desired layout:
https://i.sstatic.net/Xhvfk.png
The markup appearance:
<a load-data data-param="1">Load me</a>
A custom directive calls the service and stores all the data in a scope. The current element setup is as follows:
<ul class="nav nav-tabs col-lg-4 col-md-4" role="tablist">
<li ng-repeat="data in tableData | unique: 'category'"><a href="#{{$index}}" role="tab" toggle="tab"></li>
</ul>
...
<div class="tab-content col-lg-8 col-md-8">
<div role="tabpanel" class="tab-pane fade" id="{{$index}}" ng-repeat="contents in tableData | unique: 'category'">
<h1>{{ contents.category }}</h1>
<div class="tab-content-details">
<table class="table">
<tr>
<td>{{ contents.price }}</td>
<td>{{ contents.productConfig.specs }}</td>
<td>{{ contents.productConfig.description }}</td>
</tr>
</table>
</div>
</div>
</div>
However, the current code renders like this:
https://i.sstatic.net/O7yf4.png
Each category corresponds to one nav-link and one tab-pane. If a category has multiple products, the <table> should be on an ng-repeat, not the tab-pane.
An example of the ideal markup structure would look similar to this:
<ul class="nav nav-tabs col-lg-4 col-md-4" role="tablist">
<li class="active"><a href="#0" role="tab" toggle="tab">Category A</li>
<li><a href="#1" role="tab" toggle="tab">Category B</li>
...
</ul>
...
<div class="tab-content col-lg-8 col-md-8">
<div role="tabpanel" class="tab-pane fade active" id="0">
<h1>Category A</h1>
<div class="tab-content-details">
<table class="table">
<tr>
<td>499.00</td>
<td>Lorem ipsum</td>
<td>blah blah</td>
</tr>
<tr>
<td>479.00</td>
<td>Lorem ipsum</td>
<td>blah blah</td>
</tr>
</table>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="1">
<h1>Category B</h1>
<div class="tab-content-details">
<table class="table">
<tr>
<td>1299.00</td>
<td>Lorem ipsum</td>
<td>blah blah</td>
</tr>
</table>
</div>
</div>
</div>
Is there a way to achieve this desired result while maintaining the current data structure? Thank you!