Initially, I set up a bootstrap accordion that generates panels based on items with the property "gebieden". This functionality is functioning correctly.
Within each panel, I implemented bootstrap 'tabs'. For every object with properties "onderwerpen" and "gebieden" matching those of the parent panel, a tab-pane is created. This feature is also working as expected.
However, the issue arises when it comes to displaying data inside each tab pane in a table format. Instead of showing only the data corresponding to the selected tab and panel, the table displays all key-value pairs found in the entire JSON file.
It's important to note that I am unable to modify the JSON file as it is sourced from an open dataset available at this URL: .
To demonstrate the problem succinctly, here is a snippet of my Angular code along with a portion of the hardcoded JSON data:
var myApp = angular.module('myApp', ['ui.directives', 'ui.filters']);
function TodoCtrl($scope) {
$scope.All = [{
// JSON data entries here...
}];
$scope.selectedOnderwerpen = '';
$scope.setOnderwerpen = function(onderwerpen) {
console.log(onderwerpen);
$scope.selectedOnderwerpen = onderwerpen;
}
}
Below is my implementation using HTML and Bootstrap:
<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}}" ng-click="setGebied(item.gebieden)">
<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="sub in All | unique:'onderwerpen'">
<a data-toggle="tab" ng-click="setOnderwerpen(sub.onderwerpen)">
{{sub.onderwerpen}}
</a>
</li>
</ul>
<div class="tab-content" style="padding:2%">
<div id="{{item.onderwerpen}}" class="tab-pane fade in active">
<table ng-show="selectedOnderwerpen!=''" class="table table-bordered text-center">
<thead>
<tr>
<th class="text-center">Year</th>
<th class="text-center">Value</th>
</tr>
</thead>
<tbody ng-repeat="item in All | filter:{onderwerpen:selectedOnderwerpen}:true">
<tr ng-repeat="(key,value) in item" ng-hide="$index <2">
<td>{{key}}</td>
<td>{{value}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
To test and debug the code effectively, I have created a demo on JSFiddle.