Group By JS ng-repeat

by Austin Anderson

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div ng-app="exampleStore">
  <div ng-controller="MainCtrl">
    <div ng-repeat="(key, value) in data | groupByFilter">
      <h2 class=“mb-2 faq-category”>{{key}}</h2>
      <div ng-repeat="result in value">
        <div class=“sf_colsIn col-lg-8 faq-item”>
          <div class=“mb-3 faq” itemscope=“” itemprop=“mainEntity” itemtype=“https://schema.org/Question”>
            <label class=“h6 mb-0 faq-label” for=“{{result.Id}}” itemprop=“name”>
            </label>
            <div class=“faq-content” itemscope=“” itemprop=“acceptedAnswer” itemtype=“https://schema.org/Answer”>
              <div itemprop=“text”>{{result.Answer}}</div>
            </div>
          </div>
          <br />
        </div>
      </div>
    </div>
  </div>
</div>

JavaScript

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

myApp.controller('MainCtrl', function($scope) {
  //CANT DO STUFF HERE
});


myApp.filter('groupByFilter', function() {
  return function(items) {

    var groupBy = function(xs, key) {
      return xs.reduce(function(rv, x) {
        (rv[x[key]] = rv[x[key]] || []).push(x);
        return rv;
      }, {});
    };

    return groupBy(rawData, 'CategoryNames');
  };
});

var rawData = [{
  "Id": "f54271b2-bc8e-47f2-8e52-789e0dd7130d",
  "OriginalItemId": "2a0cb7cd-1751-47a5-9600-18467377c36f",
  "PipeId": "f9231e8e-1c74-4170-9857-6cbfc35a5c18",
  "ContentType": "Telerik.Sitefinity.DynamicTypes.Model.FAQs.faq",
  "Title": "Can I enroll in eBills from a check payee?",
  "PublicationDate": "20210122141601310",
  "LastModified": "20210122141601340",
  "Summary": "",
  "Content": "",
  "Provider": "OpenAccessProvider",
  "faqcategories": "4843e80e-581e-4a7e-8bf5-1833ceaedc86, Bill Pay | eBill, bac6e83a-c6f2-4e61-9260-c20debb12b86, Bill Pay",
  "Answer": "No, eBills are only offered by the electronic payees listed in the eBills enrollment list.",
  "Question": "Can I enroll in eBills from a check payee?",
  "CategoryNames": "Bill Pay | eBill,Bill Pay",
  "Language": "",
  "IdentityField": "2a0cb7cd-1751-47a5-9600-18467377c36f",
  "_Title": "Can I enroll in eBills from a check payee?",
  "HighLighterResult": "",
  "SuggestionsField": [],
  "$$hashKey": "object:17"
}, {
  "Id": "45b477e8-56c9-4029-9b84-2b9a6ee4b173",
  "OriginalItemId": "bce561c4-bd48-442a-89ee-60399fd1032b",
  "PipeId": "f9231e8e-1c74-4170-9857-6cbfc35a5c18",
  "ContentType": "Telerik.Sitefinity.DynamicTypes.Model.FAQs.faq",
  "Title": "What pieces of information do I need to enroll in eBills in Bill Pay?",
  "PublicationDate": "20210122141532990",
  "LastModified": "20210122141533043",
  "Summary": "",
  "Content": "",
  "Provider": "OpenAccessProvider",
  "faqcategories": "4843e80e-581e-4a7e-8bf5-1833ceaedc86, Bill Pay | eBill,...