Creating a dynamic navigation menu from an api

1

Hi guys.

Having some trouble trying to get the following working.

The flow is supposed to be like this.
Person visits the homepage. Clicks the User’s button then the navigation menu is supposed to change to contain the following links:

  • Home
  • Back
  • User 1
  • User 2

I’ve found out if i create a new navigation menu in the child template i can see the menu then, however ideally i’d just like to replace the main menu contents.
I’ve faced two problems with the different solutions i’ve tried.
Problem 1:
When switching between pages, i’m getting the contents of all the previously clicked pages all together

Problem 2:
When fetching the data and updating the routes, the navigation menu isnt being updated, however router.navigation contains the appropriate links

Aurelia complaining about the user’s page not having a router-view has made me have it both in my home page and in my home page and in the user’s page. That is causing the duplication of the content of both pages. I’m not entirely sure how to fix that since im new to aurelia and javascript in general. Most of my past work has been in very basic javascript since i mainly work in backend languages like PHP/Python. Aurelia seemed like the simplest true framework to get started with and the closest to Knockout JS which i’ve used in the past which was a breeze to work with.

Sample Code:
index.html

Hello From UserIndex



index.js
import {inject} from 'aurelia-framework';
import {HttpClient} from 'aurelia-fetch-client';
import { PLATFORM } from "aurelia-framework";

@inject(HttpClient)
export class Index {
    constructor(httpClient) {
        this.httpClient = httpClient;
    }

    getRoutes() {
        this.httpClient.fetch('users')
            .then(response => response.json())
            .then(data => {
                data.forEach(item => {
                    console.log(item);
                    this.router.addRoute({ nav: true, route: 'users/:id', name: 'user',  moduleId: PLATFORM.moduleName('views/home/index'), title: item.id, href: '#id' });
                });
                this.router.refreshNavigation();
                console.log(this.router.navigation);
          });
    }
    configureRouter(config, router) {
        this.router = router;
        this.config = config;
        config.mapRoute({ nav: true, route: [''], name: 'home', title: 'Home', moduleId: PLATFORM.moduleName('views/home/index')});
        config.mapRoute({ nav: true, route: ['users'], name: 'users', title: 'users', moduleId: PLATFORM.moduleName('views/user/index')});
        this.getRoutes();
    }
}
1 Like
2

The issue you described sounds a bit confusing for me. I was about to create a codesandbox to demonstrate your issue but couldn’t figure out how to reproduce it correctly. It would be great if you could help create a reproduction based on this https://codesandbox.io/s/3rp698v136 (Note: it’s not working).

Immediate thought looking at your code example is that if you add a new route for each item in users, but they all point to the same route (user/:id), it probably should just add 1 new navigation.

3

I managed to get the navigation to show with the above code just fine. The problem is i want the navigation to replace the main menu, rather than creating a new menu in my child view.

I spent more time debugging the issue and updated the code with what i had so far so the opening post isnt exactly valid anymore in terms of the issue, i apologise. the code however is up to date. It would work fine for a nested menu / Multi-Level menu. e g if i had a navigation in my main view and another one in my child view. So it would show both if i was to visit the page.

1 Like
4

I guess what you want is to replace the ui for your main menu? if so you can easily loop over and adjust the property on NavModel in app router. If not, please help with some code + comments, even broken, to demonstrate what you want to do. Then we can iterate over and figure out how to achieve what you want.

5

Exactly that, replace the ui for the main menu. Do you have any examples of how to do that?

1 Like
6

Can you help write some broken code/comments based on https://codesandbox.io/s/3rp698v136 so we can iterate on and figure out how to achieve what you want to do?