ngFor doesn't print JSON data - json

Question

I'm developing an Angular2 application and I want to display some JSON data with http GET request from a JSON file.
Here's my JSON (file data/contatti.json):
[
"08823323459",
"3325849593",
"somemail#hotmail.com"
]
I have a ContactService that requests data from this file:
import { Injectable } from '#angular/core';
import { Headers, Http } from '#angular/http';
import 'rxjs/add/operator/toPromise';
#Injectable()
export class ContattiService {
private contactUrl = 'data/contatti.json';
constructor(private http: Http) { }
private handleError(error: any): Promise<any> {
console.error('An error occurred', error); // for demo purposes only
return Promise.reject(error.message || error);
}
getContatti(): Promise<string[]> {
return this.http.get(this.contactUrl)
.toPromise()
.then(res => res.json().data as string[])
.catch(this.handleError);
}
}
There is a component that retrieves the data using the service:
import { Component, OnInit } from '#angular/core'
import { ContattiService } from './contatti.service'
#Component({
selector: 'contact-app',
templateUrl: './contatti.html'
})
export class ContactComponent {
contatti: string[];
constructor(
private contactService: ContattiService) { }
ngOnInit(): void {
this.getContatti();
}
getContatti(): void {
this.contactService.getContatti().then(contatti => this.contatti = contatti);
}
}
But when I try to display them in my html page (contatti.html):
<div class="col-sm-6">
<div class="panel panel-default">
<ul>
<li *ngFor="let contatto of contatti">
{{contatto}}
</li>
</ul>
</div>
</div>
The page doesn't print data. Can someone help me please?

Answer 1

You should rewrite you method with subscribe:
getContatti(): void {
this.contactService.getContatti()
.subscribe(contatti => this.contatti = contatti);
}
and service to:
getContatti(): {
return this.http.get(this.contactUrl)
.map(res => res.json().data)
.catch(error => this.handleError(error));
}
And one more, if you try to access res.json().data your contatti.json should look like:
{
"data": [
"08823323459",
"3325849593",
"somemail#hotmail.com"
]
}

Answer 2

Try this inside the component,
getContatti(): void {
this.contactService.getContatti().subscribe(contatti=>{
this.contatti = contatti;
});
}
and service.ts should be,
getContatti(): {
return this.http.get(this.contactUrl)
.map(res => res.json().data)
.catch(error => this.handleError(error));
}