Filter array by first letter

Asked

Viewed 487 times

4

I have an array of objects and I need to separate them by the letters of the alphabet, so I need to limit the items by the corresponding letter.

Example:

A - Aston Martin

B - Bugatti


angular.module("myApp", [])
	.controller("myCtrl", function ($scope) {
		$scope.alphabet = [
        "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"
    ];
  
    $scope.brands = [
        {"brand": "Ferrari"},
        {"brand": "Aston Martin"},
        {"brand": "Koenigsegg"},
        {"brand": "Lamborghini"},
        {"brand": "Bugatti"},
        {"brand": "Maserati"},
        {"brand": "Pagani"},
        {"brand": "Porsche"}
    ]
	});
.multi-column {
  column-count: 3;
  column-gap: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">

  <div class="container" ng-controller="myCtrl">    
    <div class="row">
      <div id="{{letter}}" class="col-xs-12" ng-repeat="letter in alphabet">
        <h2>{{letter}}</h2>
        <ul class="list-unstyled multi-column">
          <li ng-repeat="x in brands"><a href="">{{x.brand}}</a></li>
        </ul>
      </div>
    </div>
  </div>
  
</body>

Also put on the site codepen.io

And so on and so forth.

javascript angularjs

2 answers

2


Create a function and filter into it:

$scope.filtrar = function(letter) {
  return $scope.brands.filter(b => b.brand[0] === letter);
}

then call her in the loop ng-repeat="x in filtrar(letter)", other than ng-show the function will only return elements starting with the given letter in the parameter letter, already ng-show will render the elements and show them start with letter and the other elements were on the page.

Code working

angular.module("myApp", [])
	.controller("myCtrl", function ($scope) {
		$scope.alphabet = [
        "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"
    ];
  
    $scope.brands = [
        {"brand": "Ferrari"},
        {"brand": "Aston Martin"},
        {"brand": "Koenigsegg"},
        {"brand": "Lamborghini"},
        {"brand": "Bugatti"},
        {"brand": "Maserati"},
        {"brand": "Pagani"},
        {"brand": "Porsche"}
    ];
  
    $scope.filtrar = function(letter) {
      return $scope.brands.filter(b => b.brand[0] === letter);
    }
	});
.multi-column {
  column-count: 3;
  column-gap: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">

  <div class="container" ng-controller="myCtrl">    
    <div class="row">
      <div id="{{letter}}" class="col-xs-12" ng-repeat="letter in alphabet">
        <h2>{{letter}}</h2>
        <ul class="list-unstyled multi-column">
          <li ng-repeat="x in filtrar(letter)"><a href="">{{x.brand}}</a></li>
        </ul>
      </div>
    </div>
  </div>
  
</body>

Reference

1

I don’t know if it’s the best way, but we can do it with the ng-show, validating if the first letter of the mark is equal to the letter of the grouping displays, otherwise ignore. Look how it turned out.

I added:

ng-show="x.brand[0] == letter"

Complete code:

angular.module("myApp", [])
	.controller("myCtrl", function ($scope) {
		$scope.alphabet = [
        "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"
    ];
  
    $scope.brands = [
        {"brand": "Ferrari"},
        {"brand": "Aston Martin"},
        {"brand": "Koenigsegg"},
        {"brand": "Lamborghini"},
        {"brand": "Bugatti"},
        {"brand": "Maserati"},
        {"brand": "Pagani"},
        {"brand": "Porsche"}
    ]
	});
.multi-column {
  column-count: 3;
  column-gap: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">

  <div class="container" ng-controller="myCtrl">    
    <div class="row">
      <div id="{{letter}}" class="col-xs-12" ng-repeat="letter in alphabet">
        <h2>{{letter}}</h2>
        <ul class="list-unstyled multi-column">
          <li ng-repeat="x in brands" ng-show="x.brand[0] == letter"><a href="">{{x.brand}}</a></li>
          
        </ul>
      </div>
    </div>
  </div>
  
</body>

  • 1

    It worked great. Simple but effective.

Browser other questions tagged javascript angularjs

You are not signed in. Login or sign up in order to post.