配列内のオブジェクトを角2で格納する

Question

このデータは、Ionic 2（Angular 2）でHTTP Get Requestを使用してWordpressバックエンドから保存しようとしています。

私はこのデータ構造を受けています、データの

コンソールログは、私がの配列に（menu_1とmenu_2）のメニューのように、このデータを保存しようとしている

を対応しました - メニュー、カテゴリのカテゴリのカテゴリ、料理の配列の料理...

どうすればいいですか？

私はパイプを使用して表示または反復したくないのですが、私はそれらを扱いやすいように配列に格納したいだけです。現時点では

私のコードは次のようである：

home.ts：

私は、HTTPを取得呼び出すための注射クラス（グローバル）を持っているが、私は私の自宅にgetMenus機能に加入しません.TSコンポーネント：

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 
import { Globals } from '../../providers/globals'; 

@Component({ 
    selector: 'page-home', 
    providers: [Globals], 
    templateUrl: 'home.html' 
}) 
export class HomePage { 
    menus: any; 

    constructor(public navCtrl: NavController, public globals: Globals) { 
    this.getMenus(); 
    } 

    getMenus() { 
    this.globals.getMenus().subscribe(
     data => { 
     console.log(data); 
     this.menus = data; 
     }, 
     err => { console.log(err) } 
    ); 
    } 
} 

そして、私は、現時点では、メニューと呼ばれるクラスを作成しているが、非常に簡単です：

import { Injectable } from '@angular/core'; 
import 'rxjs/add/operator/map'; 

@Injectable() 
export class Menu { 
    name: any; 
    categories: any; 

    constructor() { 
    this.name = this.name; 
    this.categories = this.categories; 
    } 
} 

ここで、nameはオブジェクトの基本フィールドです（key：name、value： "Today's menu"、カテゴリはcat_1、cat_2（menu_1オブジェクト内に2つのオブジェクトがあり、各オブジェクトにはより多くのオブジェクト（dish_1、dish_2 ...）が含まれています）。

私のアイデアは、クラスメニュー、クラスCategory、クラスDishの各クラスのクラスを作成することです。しかし、私はどのように私はこのクラスでこのオブジェクトを格納を開始することができますの任意のアイデアを持っています。 ：S

Greetings！

Answer 1

問題に直面している場合に役立ち、何かのように：

interface Dish { 
     Name: string; 
     Description: string; 
     Thumbnail: string; 
} 

interface Category { 
     [name: string]: Dish; 
} 

type ServerResponse = { 
     [name: string]: { [name: string]: Category; } & { name: string }; 
} 

あなたがすることができます。このデータから、クラスを作成する場合：

class Menu { 
     name: string; 
     categories: { [name: string]: Category }; 

     constructor(data: { [name: string]: Category; } & { name: string }) { 
      this.name = data.name; 
      this.categories = {}; 

      Object.keys(data).forEach(name => { 
        if (name !== "name") { 
         this.categories[name] = new Category(data[name]); 
        } 
      }); 
     } 
} 

(data: ServerResponse) => { 
     this.menus = {}; 
     Object.keys(data).forEach(name => { 
      this.menus[name] = new Menu(data[name]); 
     }); 
} 

をまたCategoryクラスとすべてを作成する必要がありますが、それはアイデアです。

Answer 2

何をしようとしていますか？

あなたがしようとしているのは、ノーマライズのデータです。 http://redux.js.org/docs/recipes/reducers/NormalizingStateShape.html

は、あなたがそれをどのように実行する必要があります。

は

ここで正規化された状態がどのように見えるかだ（？！？あなたがもしそうならたぶんNgrx、これは素晴らしいアイデアを正規化することであるReduxのパターンを使用していますか）？

他にも多くのリクエストがある場合は非常に困難になるか、schemaにデータを記述してnormalizrを使用してデータを正規化してください。

Answer 3

開始する場所がわからない場合は、このアプローチを試すことができます。まず、モデルの作成：あなたのコンポーネントで

export class DummyModel { 
menu: any; 
cat: any; 
dish: any; 
... 
//you can replace any with the type expected (string, number, etc) 
} 

を、あなたはあなたのdummyModelをインポートします。また、データ

import { DummyModel }    from '../dummy.model'; 
/... 
dummyModel: DummyModel = dummyData; 

を設定し、@Nitzan Tomerは、助言ここにあなたのコードと人々をすることができ書こうと考えますあなたが最初に行うことは、サーバーから受信したデータのためのインターフェイスを作成することです