title: Group array in angular2
body: <p>I have a json response like this </p>
  
  <p><strong>JSON response</strong></p>
  
  <pre><code>"Terms": [
              {
                  "Help": "Terms",
                  "EventType": "Success",
                  "Srno": 1,
                  "Heading": "Discount Condition",
                  "TermsDesc": "50 % Discount on 1st Cab Ride"
              },
              {
                  "Help": "Terms",
                  "EventType": "Success",
                  "Srno": 2,
                  "Heading": "Discount Condition",
                  "TermsDesc": "20% Discount on Nights more than 8"
              },
              {
                  "Help": "Terms",
                  "EventType": "Success",
                  "Srno": 1,
                  "Heading": "Stay Condition",
                  "TermsDesc": "No More than 10% Discount on Less than 4 Nights Stay"
              },
              {
                  "Help": "Terms",
                  "EventType": "Success",
                  "Srno": 2,
                  "Heading": "Stay Condition",
                  "TermsDesc": "20% Discount on Nights more than 8"
              },
              {
                  "Help": "Terms",
                  "EventType": "Success",
                  "Srno": 3,
                  "Heading": "Discount Condition",
                  "TermsDesc": "No More than 10% Discount on Less than 4 Nights Stay"
              }
          ],
  </code></pre>
  
  <p>I want to group it by <code>Heading</code>. Similar <code>Heading</code> should have it's <code>TermsDesc</code> for eg. <strong>Discount Condition</strong> and <strong>Stay Condition</strong> from Response</p>
  
  <p><strong>Discount Condition</strong></p>
  
  <ul>
  <li>"50 % Discount on 1st Cab Ride"</li>
  <li>"20% Discount on Nights more than 8"</li>
  <li>"condition 3"</li>
  </ul>
  
  <p><strong>Stay Condition</strong></p>
  
  <ul>
  <li>"50 % Discount on 1st Cab Ride"</li>
  <li>"20% Discount on Nights more than 8"</li>
  <li>"condition 3"</li>
  </ul>
  
  <p>Component function where I'm getting response</p>
  
  <pre><code> getTerms(){
      this.quoteService.getTerms()
      .subscribe(
        terms =&gt; {
          this.terms = terms.resultData.Terms;
          this.notes = terms.resultData.ImpNotes;
          this.exclusions = terms.resultData.Exclusions;
          var arr=[];
          var strHeading;
          var title;
          var temp = 0;
          var listing = [];
          for(let i=0;i&lt;this.terms.length;i++) {
            strHeading=this.terms[i].Heading;
            title=this.terms[i].TermsAndConditionsDesc;
            if(!this.uniqTerm[temp]){
              this.uniqTerm[temp] = [];
            }
            if (arr.indexOf(strHeading) !== -1) {
              this.uniqTerm[temp].push({"header":strHeading});
            } 
            else {
                 arr.push(strHeading);               
                 this.uniqTerm[temp].push({"header":strHeading});               
                 listing.push({"title":title});
                 this.uniqTerm[temp].push({"title":title});
                 temp++;                 
            }
        },
        response =&gt; {
          if (response.status == 404) {
          }
        });
    }
  </code></pre>
  
  <p>How can I create Array so I can use it in <code>*ngFor</code>?</p>
  
  <p>I think I would need something like </p>
  
  <pre><code>[0]:object
       Heading:"Discount Condition"
       TermsDesc: object
                  term: Term1 
                  term: Term2
  
  [1]:object
       Heading:"Stay Condition"
       TermsDesc: object
                  term: Term1 
                  term: Term2
  </code></pre>
  
  <p>but don't know how to achieve this in angular2
  please help me here or if anyone have better suggestion, I would be glad to try</p>
  
  <p>Thanks</p>