在Angular 2中將對象存儲在數組中的對象內部

Question

我正在嘗試存儲此數據，該數據是通過Ionic 2（角度2）中具有HTTP Get Request的Wordpress后端提供的。

我正在接收此數據結構，

控制台數據響應日志-

我正在嘗試將這些數據（如菜單（menu_1和menu_2））存儲在菜單數組中，將類別存儲在類別數組中，將菜式存儲在菜餚中...

我怎樣才能做到這一點？

我不想顯示或使用Pipes進行迭代，我只想存儲在Array中以便更輕松地使用它們。

目前，我的代碼如下：

home.ts：

我有一個可注入類（全局變量）來調用http get，但是我在home.ts組件的getMenus函數中進行了訂閱：

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) }
    );
  }
}

我創建了一個名為Menu的類，此刻非常簡單：

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;
  }
}

其中名稱是對象的基本字段（鍵：名稱，值：“今天的菜單”，類別是cat_1，cat_2（menu_1對象內的兩個對象，每個對象包含更多對象）（dish_1，dish_2 ...）。

我的想法是為他們每個人創建一個班級，班級Menu，班級Category和班級Dish。 但是我對如何開始將這些對象存儲在此類中有任何想法。 ：S

問候！

Answer 1

你想做什么 ？

我認為您正在嘗試做的是規范化數據。

（您是否正在使用Redux模式？也許是Ngrx？如果這樣，將其標准化是個好主意！）

標准化狀態如下： http : //redux.js.org/docs/recipes/reducers/NormalizingStateShape.html

你應該怎么做？

您可以手動執行此操作，如果要處理許多其他請求，這將變得非常困難，或者可以在架構中描述數據並使用normalizr替您完成此工作（對數據進行標准化）。

Answer 2

如果您不知道從哪里開始。 您可以嘗試這種方法。 首先，創建一個模型：

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的建議，嘗試編寫代碼，如果您遇到問題，這里的人員可以提供幫助

Answer 3

要做的第一件事是為從服務器接收的數據創建一個接口，例如：

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類和所有類，但這就是想法。