在Angular 2中的数组中存储对象内的对象

时间:2017-02-09 09:22:48

标签: json angular typescript ionic2 javascript-objects

我正在尝试存储这些数据,这是在Ionic 2(Angular 2)中使用带有HTTP Get Request的Wordpress后端提供的。

我收到了这个数据结构,

数据响应的控制台日志 -

enter image description here

我正在尝试将这些数据存储在菜单数组中的菜单(menu_1和menu_2),类别数组中的类别,菜肴中的菜肴......

我该怎么做?

我不想使用Pipes显示或迭代,我只想存储在数组中以便更轻松地使用它们。

我目前的代码如下:

home.ts:

我有一个可注入类(Globals)来调用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;
  }
}

其中name是对象的基本字段(键:name,value:“Today's menu”,类别为cat_1,cat_2(menu_1对象中的两个对象,每个对象包含更多对象(dish_1,dish_2 ......)。< / p>

我的想法是为它们中的每一个创建一个类,类Menu,类Category和类Dish。但我知道如何在这个类中开始存储这些对象。 :S

问候!

3 个答案:

答案 0 :(得分:0)

你想做什么?

我认为您尝试做的是 规范化 您的数据。

(您使用的是Redux模式吗?也许是Ngrx?如果是这样,这是一个很好的规范化标准!)

以下是规范化状态:http://redux.js.org/docs/recipes/reducers/NormalizingStateShape.html

你应该怎么做?

您可以手动执行此操作,如果您有许多其他请求需要处理,这将变得非常困难,或者您可以在schema中描述您的数据并使用normalizr来完成此工作(为你量化数据。

答案 1 :(得分:0)

如果您不知道从哪里开始。你可以尝试这种方法。首先,创建一个模型:

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建议,尝试编写代码,如果您遇到问题,这里的人可以提供帮助

答案 2 :(得分:0)

要做的第一件事是为从服务器收到的数据创建一个接口,如:

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

您还应该创建 Dim products = db.Product.Include(Function(p) p.Status).Include(Function(p) p.Status.StatusTranslations).AsExpandable().Where(predicate).Where(Function(p) p.Status.StatusTranslations.Language.Equals("en-Us")) 类和所有类,但这就是主意。