how to show specific part of my JSON in angularjs

Question

Here I have a JSON like this:

{"years":[
  {
    "year_title":"94",
    "months":[...]
  }
  {
    "year_title":"95",
    "months":[...]
  }
  {
    "year_title":"96",
    "months":[...]
  }
]}

and I have managed to show it's data with following code:

<div ng-repeat="year in event.years">
    <h1>{{year.year_title}}</h1>
    <div ng-repeat="month in year.months">
        <h3> {{month.month_title}} </h3>
    </div>
</div>

So it obviously shows me my whole data (all years, all months). but what if I want to show only months of specific year.!? thanks guys...

You can use the filter angularjs provides: docs.angularjs.org/api/ng/filter/filter — Lesleyvdp
– Lesleyvdp, Commented May 10, 2017 at 13:48

Pengyy · Accepted Answer · 2017-05-10 14:40:17Z

1

try angularjs built-in filter, don't need custom filter at all. And you can change 94 to be a variable.

ng-repeat="year in event.years | filter: {year_title: '94'}"

refer demo below:

angular.module("app", [])
  .controller("myCtrl", function($scope) {
    $scope.event = {
      "years": [{
        "year_title": "94",
        "months": [{
          month_title: 'jan'
        }]
      }, {
        "year_title": "95",
        "months": [{
          month_title: 'feb'
        }]
      }, {
        "year_title": "96",
        "months": [{
          month_title: 'dec'
        }]
      }]
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  <div ng-repeat="year in event.years | filter: {year_title: '94'}">
    <h1>{{year.year_title}}</h1>
    <div ng-repeat="month in year.months">
      <h3> {{month.month_title}} </h3>
    </div>
  </div>
</div>

answered May 10, 2017 at 14:40

Pengyy

38.3k15 gold badges85 silver badges73 bronze badges

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

1 Comment

George Carlin Over a year ago

Awesome job man. Where have you been so far!? I was eating google to find the solution :D.

sumit chauhan · Accepted Answer · 2017-05-10 14:12:40Z

1

use you own filter like:

<div ng-repeat="year in event.years | year">
<h1>{{year.year_title}}</h1>
<div ng-repeat="month in year.months">
    <h3> {{month.month_title}} </h3>
</div>

var someApp=angular.module('someApp', []);

 someApp.filter('year', function() {
return function(input, uppercase) {
    var out = [];
    for (var i = 0; i < input.length; i++) {
        if(input[i].year === 95){
            out.push(input[i]);
        }
    }
    return out;
}

});

edited May 10, 2017 at 14:12

answered May 10, 2017 at 13:48

sumit chauhan

1,3001 gold badge13 silver badges18 bronze badges

2 Comments

George Carlin Over a year ago

if(input[i].year === 95) it says unresolved variable year.

sumit chauhan Over a year ago

i've change code try now, or provide jsfiddle i'll help you out.

Collectives™ on Stack Overflow

how to show specific part of my JSON in angularjs

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related