JSON Schema - dropdown based on selected value other dropdown

Viewed 2882

Lets say i've the following data structure

Option A
Option B
    Option B1
        Option B2.1
        Option B2.2

I am trying to create an enums stucture that allows this so I can generate a dropdown based on the value of the previous selected dropdown.

Examples :

Select option A -> No additional dropdowns
Select option B -> Generate dropdown with Option B1
Select option B1 -> Generate dropdown with Option B2.1 and Option B2.2

This would work when you want to create an array with childeren is there anything similar possible for enums

{
  "$schema": "http://json-schema.org/draft-07/schema#",

  "definitions": {
    "medicine": {
      "type": "object",
      "properties": {
        "value": { "type": "string" },
        "categories": {
          "type": "array",
          "items": { "$ref": "#/definitions/medicine" }
        }
      }
    }
  },
  "properties": {
    "person": { "$ref": "#/definitions/medicine" }
  }

}

And then the enum structure to be something like this

[
     { 
        "value ":  "Option A" 
     }, 
     { 
        "value ":  "Option B ", 
        "categories ": [ 
         { 
            "value ":  "Option B1 ", 
            "categories ": [ 
             {
                "value ":  "Option B1.1" 
             }, 
             { 
                "value ":  "Option B1.2" 
             } 
           ] 
         } 
       ] 
    }
]

So I am looking for a data structure that would allow me to make dropdowns based on the values selected here in a own layout generation engine.

1 Answers

Have you considered flattening your structure so that it's easier to look up options and sub-options?

Let's imagine that you've got an initial array for the root options:

[
  'opt_a',
  'opt_b'
]

Then you have a flattened map of all options from which you can derive labels and subsequent dropdowns:

{
  opt_a: {
    label: 'Option A'
  },
  opt_b: {
    label: 'Option B',
    children: ['opt_b1']
  },
  opt_b1: {
    label: 'Option B1',
    children: ['opt_b11', 'opt_b12']
  }
  opt_b11: {
    label: 'Option B1.1'
  }
  opt_b12: {
    label: 'Option B1.2'
  }
}

I hope this answers your question and is self-explanatory enough.

Related