# Populate field in JSONforms Dropdown with values depending on another Dropdown **URL:** \ **Category:** General\ **Created:** [May 13, 2022, 2:21pm UTC](https://jsonforms.discourse.group/t/populate-field-in-jsonforms-dropdown-with-values-depending-on-another-dropdown/759 "2022-05-13T14:21:31Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![Cornykid](https://avatars.discourse-cdn.com/v4/letter/c/ee7513/32.png) [@Cornykid](https://jsonforms.discourse.group/u/Cornykid)\ **Post date:** [May 13, 2022, 2:21pm UTC](https://jsonforms.discourse.group/t/populate-field-in-jsonforms-dropdown-with-values-depending-on-another-dropdown/759/1 "2022-05-13T14:21:31Z")
Hello Group, I am using the JSON Forms Angular package and i have a question regarding dynamics forms. I have two dropdowns, where the second dropdown is dependant on the first one. For example the first one is “country”, and the second one “state”. Now when someone selects a country (e.g. “USA”) i would need the “state” dropdown to be populated with all states of the united states only. Of course, once the “country” dropdown is set to another country, the dependant “state” field must be cleared and populated with the states of the newly selected country How would you go about solving the problem? thanks in advance ---
**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\ **Post date:** [May 16, 2022, 9:15am UTC](https://jsonforms.discourse.group/t/populate-field-in-jsonforms-dropdown-with-values-depending-on-another-dropdown/759/2 "2022-05-16T09:15:41Z")
Hi @Cornykid, you basically have two different options: - Adapting the JSON (sub) schema for `state` whenever `country` is changed - Implementing a custom renderer for `state` which queries the data for `country` before showing its dropdown. If more useful to you, you could also combine the two inputs into one custom renderer. Generally speaking I would avoid dynamically changing the JSON Schema during the lifetime of the form. This sometimes lead to weird patterns as the JSON Schema no longer is “the” schema for the data. Instead I would recommend the custom renderer approach as it’s the most flexible one. As always this depends on your exact use cases 😉 ---
**Author:** ![Cornykid](https://avatars.discourse-cdn.com/v4/letter/c/ee7513/32.png) [@Cornykid](https://jsonforms.discourse.group/u/Cornykid)\ **Post date:** [May 18, 2022, 8:43am UTC](https://jsonforms.discourse.group/t/populate-field-in-jsonforms-dropdown-with-values-depending-on-another-dropdown/759/3 "2022-05-18T08:43:38Z")
Hello @sdirix First of all, thank you very much for your answer. You have definitely pushed us in the right direction. We tried it with the custom render, but now we have the problem that we need to know which country was selected within our state renderer. We were hoping that we could use the onchange() function to detect what the user has selected in the field and then somehow pass it to our renderer. But I have the feeling that the onChange function does not work with angular. I tried to output data to the console but it was never executed. Do you have any idea how we can get the value selected in the country field inside our renderer? ---
**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\ **Post date:** [May 18, 2022, 10:22am UTC](https://jsonforms.discourse.group/t/populate-field-in-jsonforms-dropdown-with-values-depending-on-another-dropdown/759/4 "2022-05-18T10:22:21Z")
Hi @Cornykid, one way to access the overall data is to use the `JsonFormsAngularService` which is injected in the constructor, e.g. `this.jsonformsService.getState().jsonforms.core.data`. There you can then look up which country is selected. You could do this in the `mapAdditionalProps` method and therefore just always have the current country available as a prop. ---
**Author:** ![Cornykid](https://avatars.discourse-cdn.com/v4/letter/c/ee7513/32.png) [@Cornykid](https://jsonforms.discourse.group/u/Cornykid)\ **Post date:** [May 18, 2022, 3:32pm UTC](https://jsonforms.discourse.group/t/populate-field-in-jsonforms-dropdown-with-values-depending-on-another-dropdown/759/5 "2022-05-18T15:32:58Z")
Hello again @sdirix I managed to get my data, thanks for that. But it would be still really helpful if the onChange() function would work. It’s in the API documentation in any case, but we can´t apply it in our form. And the docu talks about the react version. ---
**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\ **Post date:** [May 19, 2022, 6:58am UTC](https://jsonforms.discourse.group/t/populate-field-in-jsonforms-dropdown-with-values-depending-on-another-dropdown/759/6 "2022-05-19T06:58:04Z")
In Angular we don’t have a `onChange`. Instead it’s an `@Output` called `dataChange`, see [here](https://github.com/eclipsesource/jsonforms/blob/8e9c14dcf049ee4b31baf9c40a86b394cba33139/packages/angular/src/jsonforms-root.component.ts#L43) ---
**Author:** ![arjun99](https://avatars.discourse-cdn.com/v4/letter/a/3ab097/32.png) [@arjun99](https://jsonforms.discourse.group/u/arjun99)\ **Post date:** [October 1, 2023, 1:56am UTC](https://jsonforms.discourse.group/t/populate-field-in-jsonforms-dropdown-with-values-depending-on-another-dropdown/759/7 "2023-10-01T01:56:00Z")
Hello, can you please share how can i do the following in Vue 3? ---
**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\ **Post date:** [October 5, 2023, 11:54am UTC](https://jsonforms.discourse.group/t/populate-field-in-jsonforms-dropdown-with-values-depending-on-another-dropdown/759/8 "2023-10-05T11:54:18Z")
Hi @arjun99, In Vue you can inject the form-wide state and dispatch [via `jsonforms` and `dispatch`](https://github.com/eclipsesource/jsonforms/blob/28eeeca537ef1a38e44de12cd9e6f5d5632cb913/packages/vue/src/components/JsonForms.vue#L45-L50). This can be used to resolve the data of “other” fields, e.g. which country is selected in a state field.