title: Angular nested routing and fetching data
body: <p><strong>note:</strong> I'm very new to this and trying to get my head around some aspects, so any help would be greatly appreciated! :)</p>
  
  <p><strong>Summary</strong></p>
  
  <ul>
  <li>I have a list of projects (/projects)</li>
  <li>When I click on a project, it navigates to a project summary with the URL changing to include the project ID (projects/5)</li>
  <li>On this page I have a button to view all issues associated with this project (/projects/5/issues)</li>
  <li>The projects is reading from one JSON file, the Issues are reading from another JSON file</li>
  <li>The projects appear fine, the project summary appears fine, the issues page doesn't</li>
  <li>When loading the issues page, it correctly navigates to (/projects/5/issues)</li>
  <li>However, here it displays ALL issues from the JSON file, not the ones associated with project ID #5.</li>
  <li>I believe this is most certainly due to the way I'm fetching the data back and not filtering it.</li>
  </ul>
  
  <p><strong>Question</strong></p>
  
  <ol>
  <li>When clicking on a project, then being presented the project summary page, then clicking the 'view issues' button, how do I only present issues that match that project id?</li>
  </ol>
  
  <p><strong>My Issue Service</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Injectable } from '@angular/core';
  import { Http, Response } from '@angular/http';
  
  import { Observable } from 'rxjs/Observable';
  import 'rxjs/add/operator/do';
  import 'rxjs/add/operator/catch';
  import 'rxjs/add/operator/map';
  import 'rxjs/add/observable/throw';
  
  import { IIssues } from './issues.interface';
  
  @Injectable()
  export class IssuesService {
  
      private _issuesURL = 'assets/issues-list.json';
  
      constructor(private _http: Http) { }
  
      getIssues(): Observable&lt;IIssues[]&gt; {
          return this._http.get(this._issuesURL)
              .map((response: Response) =&gt; &lt;IIssues[]&gt; response.json())
              .do(data =&gt; console.log('All: ' +  JSON.stringify(data)))
              .catch(this.handleError);
      }
  
      getIssue(id: number): Observable&lt;IIssues&gt; {
          return this.getIssues()
              .map((issues: IIssues[]) =&gt; issues.find(p =&gt; p.projectId === id));
      }
  
      private handleError(error: Response) {
          console.error(error);
          return Observable.throw(error.json().error || 'Server error');
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Issue Component TS</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, OnInit, OnDestroy } from '@angular/core';
  import { Router, ActivatedRoute } from '@angular/router';
  
  import { Subscription }       from 'rxjs/Subscription';
  
  import { IIssues } from './issues.interface';
  import { IssuesService } from './issues.service';
  
  
  @Component({
      moduleId: module.id,
      templateUrl: 'issues-list.component.html',
  })
  export class IssuesListComponent implements OnInit, OnDestroy {
      pageTitle: string = 'Issues List';
      issues: IIssues;
      errorMessage: string;
      private sub: Subscription;
  
      constructor(private _route: ActivatedRoute,
                  private _router: Router,
                  private _issuesService: IssuesService) {
      }
  
      ngOnInit(): void {
          this.sub = this._route.params.subscribe(
              params =&gt; {
                  let projectId = +params['id'];
                  this.getIssue(projectId);
          });
      }
  
      ngOnDestroy() {
          this.sub.unsubscribe();
      }
  
      getIssue(id: number) {
          this._issuesService.getIssue(id).subscribe(
              issues =&gt; this.issues = issues,
              error =&gt; this.errorMessage = &lt;any&gt;error);
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>My Issue JSON file</strong>
  I thought that including the projectID was essential here, just not entirely sure how to use it.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>[
      {
          "projectId": 1,
          "projectName": "Project X",
          "issueId": 11,
          "issueName": "Project X Issue"
        }
            {
          "projectId": 1,
          "projectName": "Project X",
          "issueId": 12,
          "issueName": "Project X-X Issue"
        }
  ]</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>My Link on the project summary component page</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a [routerLink]="['/projects', projects.projectId, 'issues']"&gt; View Issues &lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Issue Component HTML</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;h2&gt; {{ pageTitle }} &lt;/h2&gt;
  
  &lt;ul *ngIf='issues'&gt;
      &lt;li *ngFor='let issue of issues'&gt;
          &lt;ul&gt;
              &lt;li&gt; &lt;strong&gt; Issue ID: &lt;/strong&gt; {{ issue.issueId }} &lt;/li&gt;
              &lt;li&gt; &lt;strong&gt; Project ID: &lt;/strong&gt; {{ issue.projectId }} &lt;/li&gt;
              &lt;li&gt; &lt;strong&gt; Issue Name: &lt;/strong&gt; {{ issue.issueName }} &lt;/li&gt;
              &lt;li&gt; &lt;strong&gt; Project ID: &lt;/strong&gt; {{ issue.projectName }} &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>