I have a locally stored "region.json" file containing the following data:
{
"regionId":1,
"region":"CAN"
},
{
"regionId":2,
"region":"CEN"
}
Additionally, I have an "enviroment-app.component.ts" file structured as follows :
import {Component, View, CORE_DIRECTIVES, FORM_DIRECTIVES} from "angular2/core";
import {HTTPTestService} from "./http-test.service";
@Component({
selector: 'my-app'
})
@View({
template: `
<table>
<thead>
<th>Region Id</th>
<th>Region</th>
</thead>
<tbody>
<tr *ngFor="#item of myData">
<td>{{item.regionId}}</td>
<td>{{item.Region}}</td>
</tr>
</tbody>
</table>`
})
export class AppComponent {
myData:any;
}
Furthermore, there is an "http-test.service.ts" file with the following structure:
import {Injectable} from "angular2/core";
import {Http} from "angular2/http";
import 'rxjs/add/operator/map';
import {Headers} from "angular2/http";
import {AppComponent} from "./environment_app.component";
@Injectable()
export class HTTPTestService {
constructor (private _http: Http){}
this.myData = {region:[]};
get("./region.json") {
return this._http.get("./region.json", { headers: headers })
.map(res => res.json())
.subscribe(
data => {
this.myData = data;
}
);
}
}
Despite these configurations, only the header is displayed in the Front-End, as shown https://i.sstatic.net/w2lgB.png.
My goal is to fetch all the JSON data and display it properly.
Any insights on what might be going wrong would be greatly appreciated!
Thank you in advance.