Angular 2 json file linked and html showing but no data - json

Question

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...
This is my module:
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 {}
This is my component:
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 => {
this.tests = data;
})
}
}
This is my service:
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<Test[]>{
return this._http.get('./assets/data/data.json')
.map(res => <Test[]>res.json().test_cases);
.map(res => <Test[]>res.json().test_steps);
}
}
The data interface:
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
}
}
}
The json:
{
"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
]
}
]
}
]}
HTML:
<section class="tested-app" *ngFor = "let item of tests">
<h2>----<span> {{ item.app_name }} </span>----</h2>
<p class="time"> Time: <span> {{item.time_stamp}} </span> </p>
<section class="flexWrap">
<div class="module" *ngFor="let subItem of item.test_cases">
<h3> {{ subItem.test_name }} </h3>
<p class="status"> {{subItem.status}} </p>
<div class="step" *ngFor = "let testStep of subItem.test_steps">
<h4>{{testStep.step_name}}</h4>
<img src="../assets/images/{{testStep.screenshot}}">
<div class="results">
<p>Launch Times:</p>
<ul>
<li>{{testStep.launch_times[0]}}</li>
<li>{{testStep.launch_times[1]}}</li>
<li>{{testStep.launch_times[2]}}</li>
</ul>
<p>Memory:</p>
<ul>
<li>{{testStep.memory[0]}}</li>
<li>{{testStep.memory[1]}}</li>
<li>{{testStep.memory[2]}}</li>
</ul>
<p>CPU</p>
<ul>
<li>{{testStep.cpu[0]}}</li>
<li>{{testStep.cpu[1]}}</li>
<li>{{testStep.cpu[2]}}</li>
</ul>
</div>
</div>
</div>
</section></section>

Answer 1

After a long discussion I'm pretty sure this should work:
Change your getData method like so:
getData(): Observable<Test[]>{
return this._http.get('./assets/data/data.json')
.map(res => <Test>res.json();
}
And then remove the first ngFor in your template:
<section *ngIf="tests" class="tested-app">
<h2>----<span> {{ tests.app_name }} </span>----</h2>
<p class="time"> Time: <span> {{tests.time_stamp}} </span> </p>
<section class="flexWrap">
<div class="module" *ngFor="let testCase of tests.test_cases">
<h3> {{ testCase.test_name }} </h3>
<p class="status"> {{testCase.status}} </p>
<div class="step" *ngFor = "let testStep of testCase.test_steps">
<h4>{{testStep.step_name}}</h4>
<img src="../assets/images/{{testStep.screenshot}}">
UPDATE:
Please have a look at this working sample. No errors in the console with the changes in the template.
https://stackblitz.com/edit/angular-duzb7z