Storing Objects inside Object in Arrays in Angular 2

Question

I'm trying to store this data, given from a Wordpress Backend with HTTP Get Request in Ionic 2 (Angular 2).

I'm receiving this data structure,

Console Log of data response-

I'm trying to store this data like the menus (menu_1 and menu_2) in array of menus, the categories in array of categories, dishes in array of dishes...

How can I do that?

I don't want to show or iterate using Pipes, I only want to storage in Arrays to work easier with them.

My code at the moment is like:

home.ts:

I have a injectable class (Globals) to call the http get, but I do the subscribe in the getMenus function on my home.ts component:

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

And I have created a class, called Menu, at the moment is very simple:

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

Where name is basic field of the object (key: name, value: "Today's menu" and categories is cat_1, cat_2 (two objects inside menu_1 object, which each contains more objects (dish_1, dish_2...).

My idea is create a class for every one of them, class Menu, class Category and class Dish. But I have any idea of how can I start store this objects in this classes. :S

Greetings!

Answer 1

What are you trying to do ?

I think what you're trying to do is to normalize your data.

(Are you using a Redux pattern ? Maybe Ngrx ? If so, this is a great idea to normalize !)

Here's how a normalized state looks like : http://redux.js.org/docs/recipes/reducers/NormalizingStateShape.html

How should you do it ?

You can either do it by hand, which will become quite hard if you have many other requests to deal with, or you can describe your data in schema and use normalizr to do this job (normalizing data) for you.

Answer 2

If you don't know where to start. You can try this approach. First, create a model:

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

In your component, you import your dummyModel and you set the data

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

Also, consider @Nitzan Tomer advise, try to write your code and people here can help if you are facing an issue

Answer 3

The first thing to do is to create an interface for the data that you receive from the server, something like:

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

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

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

If you want to create classes from this data you can then:

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

You should also create the Category class and all, but that's the idea.