0

I need to build the sequence of dependent dropdowns based on the following JSON structure:

[
  {
    id: 1,
    label: 'Opt 1',
    data: [
      {
        id: 11,
        label: 'Opt 1.1',
        data: [
          {
            id: 111,
            label: 'Opt 1.1.1'
          },
          {
            id: 112,
            label: 'Opt 1.1.2',
            data: [
              {
                id: 1121,
                label: 'Opt 1.1.2.1'
              },
              {
                id: 1122,
                label: 'Opt 1.1.2.2'
              }
            ]
          }
        ]
      }
    ]
  },
  {
    id: 2,
    label: 'Opt 2',
    data: [
      {
        id: 21,
        label: 'Option 2.1'
      },
      {
        id: 22,
        label: 'Option 2.2'
      }
    ]
  }
];

Examples of how it is expected to work:

Scenario 1

  1. Dropdown [Opt 1, Opt 2] is displayed.
  2. Select Opt 1 from dropdown
  3. Dropdown [Opt 1.1] is being added.
  4. Select Opt 1.1
  5. Dropdown [Opt 1.1.1, Opt 1.1.2] is being displayed
  6. Dropdown [Opt 1.1.2.1, Opt 1.1.2.2] is being displayed
  7. Select any option from the previous step dropdown, END.

Scenario 2

  1. Dropdown [Opt 1, Opt 2] is displayed.
  2. Select Opt 2 from dropdown
  3. Dropdown [Opt 2.1, Opt 2.2] is being displayed
  4. Select any option from the previous step dropdown, END.

Honestly, I'm stuck with this problem and have no idea about how to approach it, any help will be appreciated.

Max Liapkalo
  • 121
  • 8
  • 1
    Can you post your html what have you tried so far – Niladri Mar 02 '21 at 19:47
  • Do you mean a multilevel drop down like this? https://stackoverflow.com/questions/62190311/how-to-make-multilevel-drop-down-menu-in-navbar-using-bootstrap-4-and-angular-7 To assign the different levels to the correct tags you could use ng-containers and ngFor like this: https://stackblitz.com/edit/angular-ivy-bln6ks?file=src/app/app.component.html – JB17 Mar 02 '21 at 20:50
  • Ok, seems like I've managed to build desired behavior https://stackblitz.com/edit/angular-jscwjb?file=src/app/app.component.ts, but now new question comes to my mind: how can I retrieve the value of each select with my current approach? – Max Liapkalo Mar 02 '21 at 22:58

0 Answers0