[英]Storing Objects inside Object in Arrays in Angular 2
我正在尝试存储此数据,该数据是通过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
问候!
我认为您正在尝试做的是规范化数据。
(您是否正在使用Redux模式?也许是Ngrx?如果这样,将其标准化是个好主意!)
标准化状态如下: http : //redux.js.org/docs/recipes/reducers/NormalizingStateShape.html
您可以手动执行此操作,如果要处理许多其他请求,这将变得非常困难,或者可以在架构中描述数据并使用normalizr替您完成此工作(对数据进行标准化)。
如果您不知道从哪里开始。 您可以尝试这种方法。 首先,创建一个模型:
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的建议,尝试编写代码,如果您遇到问题,这里的人员可以提供帮助
要做的第一件事是为从服务器接收的数据创建一个接口,例如:
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
类和所有类,但这就是想法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.