Angular create model with dynamic properties

Question

I am trying to create a model for my categories object below:

{
    "categories": [
        {
            "sandwiches": [
                {
                    "name": "breadedChickenFlatbread",
                    "description": "A good sandwich",
                    "img": "./sandwich.jpg",
                    "price": "$8.99"
                }
            ]
        },
        {
            "pizzas": [
                {
                    "name": "PizzaPie",
                    "price": "5milliondollars",
                    "img": "",
                    "description": ""
                }
            ]
        }
    ]
}

I'm not sure how to create the model portion for "categories" since the data items can change. For example, instead of "sandwiches" and "pizzas", the api could return "burgers" and "sides".

Here is what I have:

export class Menu {
    categories: Array<Category>;
}

class Category {
    // ?
}

// Details will always be the same
class Details {
    name: string;
    description: string;
    img: string;
    price: string;
}

How can I map the category names in my object, to my model? Or should the response object be changed

bryan60 · Accepted Answer · 2019-07-14 21:42:45Z

1

so a category could be typed like:

interface Category {
  [key:string]: Details[];
}

this is an index signature which basically means the type category has some number of string keys that will have a Details array type value.

You can type the key with a literal to be stricter:

type CategoryKey = 'pizzas'|'sandwiches'|'burgers'|'fries';

interface Category {
  [key:CategoryKey]: Details[];
}

now the category interface can only have those specific keys.

answered Jul 14, 2019 at 21:42

bryan60

29.5k5 gold badges56 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular create model with dynamic properties

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related