title: Angular 2 json file linked and html showing but no data
body: <p>I have been able to link an external json file and loop through some of the nested objects with ngFor as some of the the html is being put out on the website, but there is no data showing. If have been trying to put the data in an interface but it is still not showing up...</p>
  
  <p>This is my module:</p>
  
  <pre><code>import { NgModule} from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { HttpModule } from '@angular/http';
  import { Injectable } from '@angular/core';
  import { Http, Response } from '@angular/http';
  import 'rxjs/Rx';
  import { Observable } from 'rxjs/Observable';
  import { Service } from './app.service';
  
  import { AppComponent } from './component.app';
  
  @NgModule({
      imports: [
          BrowserModule,
          HttpModule
      ],
      declarations: [
      AppComponent
      ],
      bootstrap: [
          AppComponent
      ],
      providers: [
          Service
      ]
  })
  
  export class AppModule {}
  </code></pre>
  
  <p>This is my component:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Service } from './app.service';
  import { Test } from './tests';
  
  @Component({
      selector: 'app',
      templateUrl: './assets/partials/component-app.html',
      styleUrls: ['./assets/css/component-app.css']
  })
  
  export class AppComponent implements OnInit{
  
      tests: any;
  
      constructor(private service : Service){}
  
      ngOnInit() {
          this.service.getData()
          .subscribe(data =&gt; {
          this.tests = data;
          })
      }
  }
  </code></pre>
  
  <p>This is my service:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Http, Response } from '@angular/http';
  import 'rxjs/add/operator/map';
  
  @Injectable() 
  export class Service {
  
    constructor(private _http: Http) {}
  
    getData(): Observable&lt;Test[]&gt;{
      return this._http.get('./assets/data/data.json')
          .map(res =&gt; &lt;Test[]&gt;res.json().test_cases);
          .map(res =&gt; &lt;Test[]&gt;res.json().test_steps);
    }  
  }
  </code></pre>
  
  <p>The data interface:</p>
  
  <pre><code>export class Test {
       test_run_id: string;
       app_name: string;
       time_stamp: string;
       test_cases:  {
          test_name: string,
          status: string,
          test_steps: {
              step_name: string,
              screenshot: blob,
              launch_times: array,
              memory: array,
              cpu: array
          }
      }
  }
  </code></pre>
  
  <p>The json:</p>
  
  <pre><code>{
  "test_run_id":  "A233-CA92-3293-B9AA",
  "app_name": "Chewy.com",
  "time_stamp": "2018-01-20T12:00:00Z",
  "test_cases": [
      {
          "test_name": "View dog bone",
          "status": true,
          "test_steps": [
              {
                  "step_name": "Click Dog Category",
                  "screenshot": "file1.png",
                  "launch_times": [
                      100,
                      134,
                      123
                  ],
                  "memory": [
                      896,
                      945,
                      1023
                  ],
                  "cpu": [
                      1.1,
                      1.4,
                      5.7
                  ]
              },
              {
                  "step_name": "Click Treats",
                  "screenshot": "file2.png",
                  "launch_times": [
                      345,
                      441,
                      286
                  ],
                  "memory": [
                      1320,
                      1206,
                      1456
                  ],
                  "cpu": [
                      12.1,
                      13.4,
                      12.7
                  ]
              },
              {
                  "step_name": "Click Bone",
                  "screenshot": "file3.png",
                  "launch_times": [
                      342,
                      1456,
                      326
                  ],
                  "memory": [
                      1420,
                      1420,
                      1420
                  ],
                  "cpu": [
                      3.1,
                      4.4,
                      2.9
                  ]
              },
              {
                  "step_name": "Verify Bone is displayed",
                  "screenshot": "file4.png",
                  "launch_times": [
                      103,
                      124,
                      123
                  ],
                  "memory": [
                      1502,
                      1499,
                      1538
                  ],
                  "cpu": [
                      2.1,
                      3.4,
                      3.7
                  ]
              }
          ]
      },
      {
          "test_name": "View cat toy",
          "status": false,
          "test_steps": [
              {
                  "step_name": "Click Cat Category",
                  "screenshot": "file5.png",
                  "launch_times": [
                      108,
                      194,
                      163
                  ],
                  "memory": [
                      996,
                      945,
                      1223
                  ],
                  "cpu": [
                      2.2,
                      2.4,
                      2.1
                  ]
              },
              {
                  "step_name": "Click Toys",
                  "screenshot": "file6.png",
                  "launch_times": [
                      445,
                      408,
                      386
                  ],
                  "memory": [
                      920,
                      1132,
                      995
                  ],
                  "cpu": [
                      2.1,
                      3.2,
                      2.1
                  ]
              }
          ]
      }
  ]}
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;section class="tested-app" *ngFor = "let item of tests"&gt;
  &lt;h2&gt;----&lt;span&gt; {{ item.app_name }} &lt;/span&gt;----&lt;/h2&gt;
  &lt;p class="time"&gt; Time: &lt;span&gt; {{item.time_stamp}} &lt;/span&gt; &lt;/p&gt;
  &lt;section class="flexWrap"&gt;
      &lt;div class="module" *ngFor="let subItem of item.test_cases"&gt;
          &lt;h3&gt; {{ subItem.test_name }} &lt;/h3&gt;
          &lt;p class="status"&gt; {{subItem.status}} &lt;/p&gt;
          &lt;div class="step" *ngFor = "let testStep of subItem.test_steps"&gt;
              &lt;h4&gt;{{testStep.step_name}}&lt;/h4&gt;
              &lt;img src="../assets/images/{{testStep.screenshot}}"&gt;
              &lt;div class="results"&gt;
                  &lt;p&gt;Launch Times:&lt;/p&gt;
                  &lt;ul&gt;
                      &lt;li&gt;{{testStep.launch_times[0]}}&lt;/li&gt;
                      &lt;li&gt;{{testStep.launch_times[1]}}&lt;/li&gt;
                      &lt;li&gt;{{testStep.launch_times[2]}}&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;p&gt;Memory:&lt;/p&gt;
                  &lt;ul&gt;
                      &lt;li&gt;{{testStep.memory[0]}}&lt;/li&gt;
                      &lt;li&gt;{{testStep.memory[1]}}&lt;/li&gt;
                      &lt;li&gt;{{testStep.memory[2]}}&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;p&gt;CPU&lt;/p&gt;
                  &lt;ul&gt;
                      &lt;li&gt;{{testStep.cpu[0]}}&lt;/li&gt;
                      &lt;li&gt;{{testStep.cpu[1]}}&lt;/li&gt;
                      &lt;li&gt;{{testStep.cpu[2]}}&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;&lt;/section&gt;
  </code></pre>