angular4/typescriptで新しいJavascriptオブジェクトを作成するjsonレシービングjson

Question

これは長いポストになりますが、私は自分のサーバーとクライアントの間の通信について私の理解に明確にする必要があります。

私にはcityList:City[] = [];という変数があり、都市リストを含むように設計されています。

The model for `City` is: 

    export class City{ 
    public name: string; 

    constructor(name:string){ 
    this.name = name; 
    } 
} 

私は、都市のリストを返すように設計されたAPIコールを持っています。このサービスは、私のジェネリックのgetService（下記のgetService）それに注入しました：

getService(url) { 
    var value: any[] = []; 
    this.http.get(url) 
     .map(
     (response: Response) => { 
      const data = response.json() 
      .subscribe(
       (mappedData: any[]) => value = mappedData, 
       (error) => console.log(error) 
      ) 
       } 
    ); 
    return value; 

データに基づいて行動するサービス：

import {Injectable, OnInit} from '@angular/core'; 
import 'rxjs/Rx'; 

import {City, Neighborhood, Cuisine, Privacy, VenueType, Amenities } from 
import {ServerComService} from "./serverComService"; 
import {cityListUrl, venueFilterDataOptionsUrl} from 'app/backendUrls'; 

@Injectable() 
export class DynamicFormDataService implements OnInit { 

    constructor(private serverComService: ServerComService){} 

    cityList: City[]= []; 
    neighborhood = []; 
    cuisine = []; 
    privacy = []; 
    venueType = []; 
    amenities = []; 



    cityGet(){ 

    if(this.cityList.length > 0){ 
     return this.cityList; 
    } 
    this.cityList = this.serverComService.getService(cityListUrl) 
    return this.cityList; 
    } 

ngOnInit(){ 
    this.cityGet(); 
} 

}

がある輸入のいくつかのタイプミスが、それらを無視することができますこれは私が最初に理解に取り組んでいます。

cityList配列のデータを使用したい場合は、その配列を反復して呼び出し、city.name値の位置を指定しますか？

都市リストの配列に追加する場合はどうなりますか？

私は、その引数としてフォームデータを受け取り、 ので、おそらく機能、そして

c = new City('Pound Town'); 
cityList.push(c); 

私は場合によってはプッシュと呼ばれるか、HTTPメソッドを置くサービス街のコンストラクタを呼び出す必要があります新しいものを更新または作成する。

メインと総質問は、その後、私はJSONに

またはJavaScriptのオブジェクトをオブジェクトのJavascriptに JSONを変換スキップし、この過程で行方不明です何がありますか？

私は全体的な実行で正しいですか？変数のタイプをjsonの文字列にして、クライアントコードで使用するオブジェクトの適切な型に変換しますか？

Answer 1

あなたのコードを持ついくつかの問題があります：それは（例えばHTTPリクエストなど）非同期動作にフェッチされている場合

（1）あなたは値を返すことはできません。
値自体の代わりに値に約束を返す必要があります。以下のような
何か：

getService(url) { 
    this.http.get(url).then(response => { 
     // transform response and return it 
    }).catch(e => console.log(e)); 
} 

getServiceが非同期であるので、（2）、cityGetもので、多分何かのように、値を返すことはできません。

cityGet() { 
    if(this.cityList.length > 0){ 
     return Promise.resolve(this.cityList); 
    } 

    return this.serverComService.getService(cityListUrl).then(response => { 
     this.cityList = response; 
    }); 
} 

（3）getServiceであなたがjsオブジェクトを受け取りますjsonレスポンスを表す場合、Cityのインスタンスを持つ場合は、結果にアイテムごとにインスタンスを作成する必要があります。

getService(url) { 
    this.http.get(url).then(response => { 
     return response.map(city => Object.assign(new City(), city)); 
    }).catch(e => console.log(e)); 
}