Loop through different JSON objects with unique values using ng-repeat

Question

Loop through different JSON objects with unique values using ng-repeat

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.

javascript angularjs json twitter-bootstrap angularjs-ng-repeat

Answer 1

Answer №1

To sort out the object based on the tab that was clicked, you can utilize the filter function. I have provided a functional fiddle below which showcases the properties according to the selected tab - http://jsfiddle.net/uwpjk28w/12/

In essence, I included an ng-click function that alters the onderwerpen property:

<a data-toggle="tab" ng-click="setOnderwerpen(item.onderwerpen)">
     {{item.onderwerpen}}
</a>

The function responsible for modifying the onderwerpen is as follows:

 $scope.selectedOnderwerpen = '';
 $scope.setOnderwerpen = function (onderwerpen) {
        $scope.selectedOnderwerpen = onderwerpen;
 }

Additionally, the filter implementation is detailed below:

<tbody ng-repeat="item in All | filter {onderwerpen:selectedOnderwerpen}:true">
      <tr ng-repeat="(key,value) in item" ng-show="$index < 7">
           <td>{{key}}</td>
           <td>{{value}}</td>
      </tr>
</tbody>

Moreover, by using ng-show, the table will only be displayed once a tab has been selected.

ng-show="selectedOnderwerpen!=''"

I trust this information proves beneficial.

Answer 2

To sort out the object based on the tab that was clicked, you can utilize the filter function. I have provided a functional fiddle below which showcases the properties according to the selected tab - http://jsfiddle.net/uwpjk28w/12/

In essence, I included an ng-click function that alters the onderwerpen property:

<a data-toggle="tab" ng-click="setOnderwerpen(item.onderwerpen)">
     {{item.onderwerpen}}
</a>

The function responsible for modifying the onderwerpen is as follows:

 $scope.selectedOnderwerpen = '';
 $scope.setOnderwerpen = function (onderwerpen) {
        $scope.selectedOnderwerpen = onderwerpen;
 }

Additionally, the filter implementation is detailed below:

<tbody ng-repeat="item in All | filter {onderwerpen:selectedOnderwerpen}:true">
      <tr ng-repeat="(key,value) in item" ng-show="$index < 7">
           <td>{{key}}</td>
           <td>{{value}}</td>
      </tr>
</tbody>

Moreover, by using ng-show, the table will only be displayed once a tab has been selected.

ng-show="selectedOnderwerpen!=''"

I trust this information proves beneficial.

Answer 3

Answer №2

In my opinion, a more effective way to structure the JSON data would be like this:

{
   "areas":"Antwerp",
   "topics":"Average net income per taxpayer",
   "data":{
      "data_2005":"15084,8252887",
      "data_2006":"14935,2782929",
      "data_2007":"15353,0192747",
      "data_2008":"16040,981705",
      "data_2009":"16050,4881554",
      "data_2010":"15777,0232385",
      "data_2011":"16487,8501985"
   }
},
{
   "areas":"Antwerp",
   "topics":"Median net income",
   "data":{
      "data_2005":"11424",
      "data_2006":"11194",
      "data_2007":"11445",
      "data_2008":"12208",
      "data_2009":"12316",
      "data_2010":"12211",
      "data_2011":"12788"
   }
},
{
   "areas":"Antwerp",
   "topics":"Number of taxpayers",
   "data":{
      "data_2005":"129568",
      "data_2006":"137614",
      "data_2007":"141273",
      "data_2008":"142771",
      "data_2009":"146058",
      "data_2010":"151516",
      "data_2011":"151674"
   }
}

To access the data efficiently, you can utilize the following HTML structure:

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body >
    <div class="panel-group" id="accordion" ng-controller="mainCtrl">
                    <div class="panel panel-default" ng-repeat="item in All">
                        <div class="panel-heading text-center" data-toggle="collapse" data-parent="#accordion" id="{{item.areas}}" href="#{{$index}}">
                            <h4 class="panel-title">
                                {{item.areas}}
                            </h4>
                        </div>
                        <div id="{{$index}}" class="panel-collapse collapse ">
                            <div class="panel-body text-center">
                                <ul class="nav nav-tabs">
                                    <li>
                                        <a data-toggle="tab" href="#{{item.topics}}">
                                            {{item.topics}}
                                        </a>
                                    </li>
                                </ul>
                                <div class="tab-content" style="padding:2%">
                                    <div id="{{item.topics}}" class="tab-pane fade in active">
                                        <table class="table table-bordered text-center">
                                            <thead>
                                                <tr>
                                                    <th class="text-center">Year</th>
                                                    <th class="text-center">Value</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr ng-repeat="(key,val) in item.data" ng-hide="$index<2" >
                                                    <td>{{key}}</td>
                                                    <td>{{val}}</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

  </body>

</html>

For a live demonstration, visit this plunker link.

Answer 4

In my opinion, a more effective way to structure the JSON data would be like this:

{
   "areas":"Antwerp",
   "topics":"Average net income per taxpayer",
   "data":{
      "data_2005":"15084,8252887",
      "data_2006":"14935,2782929",
      "data_2007":"15353,0192747",
      "data_2008":"16040,981705",
      "data_2009":"16050,4881554",
      "data_2010":"15777,0232385",
      "data_2011":"16487,8501985"
   }
},
{
   "areas":"Antwerp",
   "topics":"Median net income",
   "data":{
      "data_2005":"11424",
      "data_2006":"11194",
      "data_2007":"11445",
      "data_2008":"12208",
      "data_2009":"12316",
      "data_2010":"12211",
      "data_2011":"12788"
   }
},
{
   "areas":"Antwerp",
   "topics":"Number of taxpayers",
   "data":{
      "data_2005":"129568",
      "data_2006":"137614",
      "data_2007":"141273",
      "data_2008":"142771",
      "data_2009":"146058",
      "data_2010":"151516",
      "data_2011":"151674"
   }
}

To access the data efficiently, you can utilize the following HTML structure:

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body >
    <div class="panel-group" id="accordion" ng-controller="mainCtrl">
                    <div class="panel panel-default" ng-repeat="item in All">
                        <div class="panel-heading text-center" data-toggle="collapse" data-parent="#accordion" id="{{item.areas}}" href="#{{$index}}">
                            <h4 class="panel-title">
                                {{item.areas}}
                            </h4>
                        </div>
                        <div id="{{$index}}" class="panel-collapse collapse ">
                            <div class="panel-body text-center">
                                <ul class="nav nav-tabs">
                                    <li>
                                        <a data-toggle="tab" href="#{{item.topics}}">
                                            {{item.topics}}
                                        </a>
                                    </li>
                                </ul>
                                <div class="tab-content" style="padding:2%">
                                    <div id="{{item.topics}}" class="tab-pane fade in active">
                                        <table class="table table-bordered text-center">
                                            <thead>
                                                <tr>
                                                    <th class="text-center">Year</th>
                                                    <th class="text-center">Value</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr ng-repeat="(key,val) in item.data" ng-hide="$index<2" >
                                                    <td>{{key}}</td>
                                                    <td>{{val}}</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

  </body>

</html>

For a live demonstration, visit this plunker link.

Loop through different JSON objects with unique values using ng-repeat

Answer №1

Answer №2

Similar questions

The custom theme background template color in Oh My Posh is not being recognized

Angular error: Attempting to reduce an empty array without an initial value

What method can I use to adjust the font style when it overlays an image?

AngularJS: How Components Communicate by Interpolating Child Content

What is the best method in JavaScript to create three different shades of a color?

Tips on accessing real-time data from a JSON file

Removing all items with a specific ID and its related items in Javascript: How to achieve this recursively?

Designing a Curved Stepper Component in the Shape of an S

Exploring the RecylcerView and Retrofit2 combo for retrieving data efficiently

What are the benefits of adding member functions to the data structures of React.js store?

Leveraging Angular-translate with state parameters

Using NodeJS to fetch external page data and return Javascript variable information

Is it possible to refresh a div on one .aspx page using content from another .aspx page?

Learn the process of moving the focus to the next input type using AngularJS

What's the reason Rails is not recognizing relative JavaScript files?

Looking for an API to retrieve random quotes and images from a website?

Problem with implementing swipeable tabs using Material-UI in React

Generating a collection of objects using arrays of deeply nested objects

Tips on programmatically filtering angular lists

Creating a Duplicate of the Higher Lower Challenge Game