Hide repeating element from JSON object in angularJs

Question

Hello suppose I have a JSON Object

`var books = [{
    "Genre": "Sci-fic",
    "Name": "Bookname1"
}, {
    "Genre": "Sci-fic",
    "Name": "Bookname2"
}, {
    "Genre": "Non sci-fic",
    "Name": "Bookname3"
}, {
    "Genre": "Non sci-fic",
    "Name": "Bookname4"
}];`

now how I want to show it like

               Sci-fic
              Bookname1
              Bookname2
             Non-scific
              Bookname3
              Bookname3

I am well aware by angular unique property but unique discard the changes I want to segregate data based on similar string in json object

I have tried so far with unique but no luck. Any suggestion please.

Possible duplicate of How can I group data with an Angular filter? — Heretic Monkey
– Heretic Monkey, Commented Apr 8, 2016 at 23:11

Vaibhav Pachauri · Accepted Answer · 2016-04-08 18:39:12Z

1

You need to apply a filter. 'orderBy' is being provided by angular.js. You can do something like the following to get the expected result :

INDEX.HTML

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

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div ng-repeat="bookPerGenre in booksToFilter() | filter:filterGenres">
        <b>{{bookPerGenre.Genre}}</b>
        <li ng-repeat="book in books | filter:{Genre: bookPerGenre.Genre}">{{book.Name}}</li>        
    </div>
  </body>

</html>

APP.JS

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

app.controller('MainCtrl', function($scope) {
  $scope.books = [{
    "Genre": "Sci-fic",
    "Name": "Bookname1"
}, {
    "Genre": "Sci-fic",
    "Name": "Bookname2"
}, {
    "Genre": "Non sci-fic",
    "Name": "Bookname3"
}, {
    "Genre": "Non sci-fic",
    "Name": "Bookname4"
}];

$scope.booksToFilter = function(){
  indexedGenres = [];
  return $scope.books;
};

$scope.filterGenres = function(book) {
        var genreIsNew = indexedGenres.indexOf(book.Genre) == -1;
        if (genreIsNew) {
            indexedGenres.push(book.Genre);
        }
        return genreIsNew;
    };

});

You can refer this plnkr

edited Apr 8, 2016 at 18:39

answered Apr 8, 2016 at 16:45

Vaibhav Pachauri

2,6712 gold badges21 silver badges34 bronze badges

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

2 Comments

Himanshu Gupta Over a year ago

Thanks but it's not as I wanted it's repeating value I am looking for result like this Sci-fic Bookname1 Bookname2 Non-scific Bookname3 Bookname3

Vaibhav Pachauri Over a year ago

@HimanshuGupta Please look at the updated code(plnkr). I hope this helps.

Danda · Accepted Answer · 2016-04-08 16:34:44Z

0

like arrays books[0] used to access the first element. I hope this will help!

answered Apr 8, 2016 at 16:34

Danda

3901 gold badge2 silver badges14 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 10:28:31Z

0

I guess you also need to use groupBy filter like the following question

How can I group data with an Angular filter?

Something like

<ul ng-repeat="(key, value) in books | groupBy: 'Genre'">
    {{ key }}
    <li ng-repeat="book in value">
    {{ book.Name }} 
    </li>
</ul>

Try it.

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered Apr 8, 2016 at 18:03

Bhabishya Kumar

7313 silver badges7 bronze badges

Collectives™ on Stack Overflow

Hide repeating element from JSON object in angularJs

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related