Angularを使用してJSONデータを取得する

Question

私は角型cliで新しくjsonファイルからデータを取得しようとしていますが、動作していません。また、jsonファイルから特定のデータ値を取得しようとしていますが、コード： 私のコード：

app.components.ts：employedata.json

import { Component } from '@angular/core'; 
import { BackendApiService } from './services/backend-api.service'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    public arry; 

    constructor(private backendApiService: BackendApiService) {} 

    profile = []; 

    ngOnInit() { 
     arry = this.backendApiService.getUser() 
      .subscribe(data) 
      .srchlink 
      .map(function(srchlink) { 
       return srchlink.slink; 
      }); 
    } 

    testings() { 
     console.log(arry); 
     console.log(data.autocomp.sval); 
    } 
} 

バックエンドapi.service.ts

import { Injectable } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 

import 'rxjs/add/operator/map'; 

@Injectable() 
export class BackendApiService { 
    private _url="assets/employeedata.json"; 
    public comUrl; 

    constructor (private http: Http) {} 

    getUser() { 
     return this.http.get(this._url) 
      .map((res:Response) => res.json()); 
    } 
} 

{ 
    "srchlink": [ 
     { "slink":"google.com"}, 
     { "slink":"yahoo.com"}   
    ], 
    "autocomp": [ 
     { "sval":"Table"}, 
     { "sval":"Back"}, 
     { "sval":"Drag"}, 
    ] 
} 

Answer 1

EDIT：あなたのコメントからの要求を含むように更新。

subscribeの使用が間違っています。渡すパラメータ（data）は、処理できるデータが与えられるコールバック関数でなければなりません。 ngOnInitに次の変更は、あなたのために働く必要があります。

ngOnInit() { 
    this.backendApiService.getUser() 
     .subscribe(data => { 
      arry = data.srchlink 
       .map(function(srchlink) { 
        return srchlink.slink; 
       }); 

      autocompv = data.autocomp 
       .map(function(autocomp) { 
        return autocomp.sval; 
       }); 
     }); 
} 

注意すべき主なものは、あなたの例ではhttp.getは、あなたが順番にsubscribe以内にコールバック関数を使用する必要が理由です非同期操作、ということですデータ自体にアクセスすることができます。