将对象内部的对象存储在角2中的数组中

Question

我试图存储这些数据，从Wordpress后端给出的HTTP请求在Ionic 2(角2)中提供。

我收到了这个数据结构，

数据响应控制台日志-

​

​

我试图把这些数据像菜单(menu_1和menu_2)一样存储在菜单数组中，类别存储在类别数组中，盘子存储在盘子数组中.

我怎么能这么做？

我不想使用管道显示或迭代，我只想存储在数组中，以便更容易地使用它们。

我现在的代码是：

home.ts：

我有一个可注入类(Globals)来调用http，但是我在home.ts组件上执行home.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是对象的基本字段(键: name，value：“今天的菜单”，类别是cat_1，cat_2 ( menu_1对象中的两个对象，每个对象包含更多的对象(dish_1，dish_2.))。

我的想法是为他们每个人创建一个类，类菜单，类类别和类餐。但是我对如何在这个类中开始存储这个对象有任何想法。:S

欢迎光临！

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

你想做什么？

我认为您想要做的是规范化您的数据。

(你使用的是Redux模式吗？也许是Ngrx？如果是这样的话，这是一个好主意，使之正常化!)

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

你该怎么做？

您可以手工完成，如果您有许多其他请求要处理，这将变得相当困难，或者您可以用https://github.com/paularmstrong/normalizr/blob/master/docs/api.md#schema描述您的数据并使用https://github.com/paularmstrong/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建议，尝试编写您的代码，如果您面临问题，这里的人员可以提供帮助。