Ionic dynamic menu through json

Ionic Framework ionic-v3
1

Hey,

I’m trying to have a ‘semi-dynamic’ menu for updating menu item-names and icons on the fly.
The problem I have is whenever I parse the json with the exact same output as

title: data[i].title, component: data[i].component, icon: data[i].icon

To get almost the exact same output I had with static menu. The only problem is, while parsing my json, its putting the component part, inside quotes, making it ‘A invalid link’.

Is there any way to make the component without quotes? I pre-defined those pages and work fine without quotes, but from json it auto puts quotes, I need to send it as type or something.

I bet I’m overlooking a small part, hope anyone is able to help me with this little issue.

In short what I want:

this.appMenuItems.push( { title: "Homepage", component: HomePage, icon: "md-icon-balbal" } );

What I get:

this.appMenuItems.push( { title: data[i].title, component: data[i].component, icon: data[i].icon } );
which results in:
this.appMenuItems.push( { title: "Homepage", component: "HomePage", icon: "md-icon-balbal" } );

I don’t want those component value QUOTES :smiley:

Thanks!

1 Like
2

The simplest way is just keep a map of names to components.

const menuComponents = {
  HomePage: HomePage,
  OtherPage: OtherPage
}

menuItems.forEach(menuItem => {
  this.menuItems.push({ title: menuItem.title, component: menuComponents[menuItem.component], icon: menuItem.icon });
});
1 Like
3

Wonderfull! Fully fixed it thanks!