angular2 how to get data by JSON and render them in html - json

Question

I trying to render JSON data,
i do as follows...
#Component({
selector:'free-ip',
templateUrl:'./freeip.component.html'
})
export class FreeIpComponent implements OnInit{
getData:string[];
constructor(private http: FreeIpService){}
getFreeIp(){
this.http.getData()
.subscribe(
data => this.getData
);
}
ngOnInit(){
this.getFreeIp();
}
}
My JSON format...
[{"name":"1(К2)","ipange":"85.143.77.64/26","count":14},
{"name":"1(К2)","ipange":"109.123.184.128/26","count":31},
{"name":" 7","ipange":"109.123.188.128/25","count":60}]
Please help me, how to render data to html?
Thank you.

Answer 1

There is a simpler way render in HTML using the built-in json pipe:
<pre>{{getData | json}}</pre>

Answer 2

Try this:-
freeIpService.ts file:-
import { Injectable } from '#angular/core';
import { Http, URLSearchParams} from '#angular/http';
export class FreeIpService {
constructor(private http: Http) { }
getFreeIp(){
this.http.get('src/assets/data/freeId.json').map(response => response.json()
}
}
FreeIpComponent.ts file:-
import { Component, OnInit } from '#angular/core';
import { FreeIpService } from './freeIpService';
export class FreeIpComponent implements OnInit{
getData:any;
constructor(private FreeIpService: FreeIpService){}
ngOnInit(){
this.FreeIpService.getFreeIp().subscribe(response => { this.getData = response}, err => console.log(err), ()=> console.log(this.getData));
}
Create service file and paste the service.ts code and create a component and paste component.ts code. In assets folder create data folder and in data folder create json file freeId.json file and paste json code in this file.

Answer 3

<tr *ngFor="let item of getData">
<td>{{item.name}}</td>
<td>{{item.ipange}}</td>
<td>{{item.count}}></td>
this is that i wanted)
thank all for your help

Answer 4

You should serialize or deserialize your data when it is responsed
The first, this your http service
get(uri: string) {
return this._http.get("your uri", { headers: "your headers"}).map(this.extractData);
}
private extractData(response: Response) {
let data = response.json();
return data || {}
}
The second, this is function implement in component
getAll() {
this._httpProviderService.get("/api/product_category/GET/categories")
.subscribe(result => {
this.productCategories = result;
});
}
And the last, this is html
<tr *ngFor="let item of productCategories;let rowIndex=index">
<td class="a-center ">
<input type="checkbox" class="" name="table_records">
</td>
<td class="">{{rowIndex+1}}</td>
<td class="">{{item.ID}}</td>
<td class="">{{item.Name}}</td>
<td class="">{{item.Description}}</td>
<td class="">{{item.Status}}</td>
</tr>