I am facing an issue with a JSON file that contains three different objects for each area, and I need some help. Here is an example:
{
"gebieden":"Antwerpen",
"onderwerpen":"Gemiddeld netto inkomen per belastingsplichtige",
"data_2005":"15084,8252887",
...
},
{
"gebieden":"Antwerpen",
"onderwerpen":"Mediaan netto inkomen",
"data_2005":"11424",
...
},
{
"gebieden":"Antwerpen",
"onderwerpen":"Aantal belastingsplichtigen",
"data_2005":"129568",
...
}
The challenge is to display all areas in an accordion group where the property "gebieden" has the same value. I have managed to achieve this layout using AngularJS:
<div class="panel-group" id="accordion">
<div class="panel panel-default" ng-repeat="item in All | unique:'gebieden'">
<div class="panel-heading text-center" data-toggle="collapse" data-parent="#accordion" id="{{item.gebieden}}" href="#{{$index}}">
<h4 class="panel-title">
{{item.gebieden}}
</h4>
</div>
<div id="{{$index}}" class="panel-collapse collapse ">
<div class="panel-body text-center">
<ul class="nav nav-tabs">
<li ng-repeat="item in All | unique:'onderwerpen'">
<a data-toggle="tab" href="#{{item.onderwerpen}}">
{{item.onderwerpen}}
</a>
</li>
</ul>
<div class="tab-content" style="padding:2%">
<div id="{{item.onderwerpen}}" class="tab-pane fade in active">
<table class="table table-bordered text-center">
<thead>
<tr>
<th class="text-center">Jaar</th>
<th class="text-center">Waarde</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key,val) in item | comparator" ng-hide="$index<2" >
<td>{{key}}</td>
<td>{{val}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
I have implemented a tab layout for the panel body, creating tabs based on the values of "onderwerpen" from the JSON. However, I'm struggling to access the data from the object with a specific "onderwerpen" value as I am using the unique filter to avoid duplicate data. How can I make only the data from the selected tab show?
If my question is unclear, please let me know so I can provide more information. Thank you.