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?](http://stackoverflow.com/questions/14800862/how-can-i-group-data-with-an-angular-filter) — Heretic Monkey, Apr 08 '16 at 23:11

Vaibhav Pachauri · Answer 1 · 2016-04-08T18:39:12.440

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="angular.js@1.4.x" 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

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 — Himanshu Gupta, Apr 08 '16 at 17:05
@HimanshuGupta Please look at the updated code(plnkr). I hope this helps. — Vaibhav Pachauri, Apr 08 '16 at 18:39

score 0 · Answer 2 · answered Apr 08 '16 at 16:34

0

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

answered Apr 08 '16 at 16:34

Danda

380
1
2
14

score 0 · Answer 3 · edited May 23 '17 at 10:28

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 '17 at 10:28

Community

1
1

answered Apr 08 '16 at 18:03

Bhabishya Kumar

731
3
7

Hide repeating element from JSON object in angularJs

3 Answers3