Как получить json данные в Angular2 приложении?

Question

[Alexander Belov]

Есть на локале отдельный json файл типа:

[
    {
      "name": "Release One",
      "source": { "pointer": "/data/attributes/first-name" },
      "songs":  "Release One Songs",
      "year": "2010"
    },
    {
      "name": "Release Two",
      "source": { "pointer": "/data/attributes/first-name" },
      "songs":  "Release Two Songs",
      "year": "2011"
    },
    {
      "name": "Release Three",
      "source": { "pointer": "/data/attributes/first-name" },
      "songs":  "Release Three Songs",
      "year": "2014"
    }
  ]

Каким образом данные загрузить во view приложения Angular2?
Перепробовал кучу тюториалов, что-то устарело и не работает, что-то просто вызывает ошибки из-за того, что стартовый проект построен по-разному.

releases.service.ts

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/Rx';
import 'rxjs/add/operator/map';

@Injectable()
export class ReleasesService {
	constructor(private http: Http){

	}

	getReleases(){
		return this.http.request('./releases/releases.json')
		.map(res => res.json());
	}

	getData(res: Response){

	}
}

releases.component.html

<div class="releases-component">
	Releases Component starts here!
	<div *ngFor="let release of releases">
		<h3>Name: {{release.name}}</h3>
		<h3>Name: {{release.year}}</h3>
	</div>
</div>

Во view ничего не отображается. В инспекторе вместо ожидаемых объектов:

<!--template bindings={
  "ng-reflect-ng-for-of": null
}-->

releases.component.ts

import { Component, OnInit } from '@angular/core';
import { ReleasesService } from './releases.service';

@Component({
	selector: 'releases',
	templateUrl: './releases.component.html',
	styleUrls: ['./releases.component.scss']
})
export class ReleasesComponent implements OnInit { 
	constructor(){

	}

	ngOnInit(){

	}
}

Comments

[Алексей Зуев]

Добавьте еще, пожалуйста, файл releases.component.ts. Очень сильно чую, что там не всё гладко у вас

[Alexander Belov]

Алексей Зуев: updated

[Алексей Зуев]

Alexander Belov: а почему всё пусто в классе? где releases свойство?

[Alexander Belov]

Алексей Зуев: Добавил под экспортом класса private releases;

Answer 1

[Алексей Зуев]

Вариант 1 - получаем Observable и используем AsyncPipe, который сделает всю грязную работу за нас

html
*ngFor="let release of releases | async"

component

releases: Observable<any[]>;

constructor(private releasesService: ReleasesService) {}

ngOnInit() {
  this.releases = this.releasesService.getReleases();
}

Вариант 2 - сами подписываемся

releases: any[];

constructor(private releasesService: ReleasesService) {}

ngOnInit() {
  this.releasesService.getReleases()
     .subscribe(data => this.releases = data);
}

Comments

[Alexander Belov]

Пробую 1 вариант, но в консоли пишет, Declaration or statement expected in releases.component.ts

[Alexander Belov]

По варианту 2 ошибка:
GET localhost:8080/releases/releases.json 404 (Not Found)
Я пробовал пути по-разному прописывать, но упорно не Webpack видит json файл.
Прошу помочь решить проблему, если известно, как.

Answer 2

[Alexander Belov]

Мб кому-то пригодится, проблема была в json файле, расположенном на localhost. Через удалённый запрос всё сработало. Всем спасибо!