Autopopulate dropdown using data from another dropdown in the field of array type

[VaralakshmiGoluguri]

I'm using fig tree evaluator to evaluate schema and populate options of dropdown by fetching an api. My requirement is to populate a dropdown by fetching an api and then using the value selected from dropdown1 the options of second dropdown need to be set by fetching another api. I want to acheive this in array type field. So this way now I'm able to fetch api and display options of country My issue here is when I select a country based on the country selected api need to be fetched and set as options for city . How to handle every instance of array. Here i'm attaching my schema too. Please help me with the issue I was trying from 5 days to sort this but unable to.. Thanks in advance

[CarlosNZ]

Okay, so the difference between what you're trying to do and my original demo example is that you have an array of country selectors, each with their own "city" selector, is that correct?

I think that should be do-able, but can you post your schema.json and uischema.json here so I can take a closer look?

[VaralakshmiGoluguri]

Thank you for replying @CarlosNZ I have already posted schema and again posting here. My Schema

{ "type": "object", "properties": { "region": { "type": "array", "items": { "type": "object", "properties": { "country": { "type": "string", "title": "Country", "enum": { "$GET": { "url": "https://countriesnow.space/api/v0.1/countries/flag/unicode", "returnProperty": "data.name" } } }, "city": { "type": "string", "title": "City", "enum": { "$?": { "condition": { "$getData": "region", "fallback": false }, "valueIfTrue": { "$post": { "url": "https://countriesnow.space/api/v0.1/countries/cities", "parameters": { "country": { "operator": "objectFunctions", "functionPath": "getCities", "args": ["$getData(region)"] } } }, "returnProperty": "data", "fallback": ["Loading cities, please wait..."] }, "valueIfFalse": ["Please select a country first"] } } } } } } }, "required": ["country", "city"] }

UI Schema

{ "type": "VerticalLayout", "elements": [ { "type": "Group", "elements": [ { "type": "Control", "scope": "#/properties/region" } ] } ] }

[CarlosNZ]

Hi, I've had a look at this and there's not really a straightforward way to do what you want. The problem is that the "City" component needs to know the path to the specific array item in the data object, and this information is simply not available to FigTree, at least the way it's being used here (and in my demo).

I see in your post in the JSON Forms forum that you are using a custom renderer. In this case, it might be possible to capture what you want, as custom renderers receive a "path" prop describing where they are in the data tree.

But I'm still not sure how you'd pass this "path" value back up to the FigTree instance. You might need to have a FigTree instance within your component, but at that point it might be easier to just hand-code a specific solution in your own custom renderer. The point of using FigTree here is to be able to add more dynamic possibilities without writing custom logic in custom renderers, since we evaluate the schema and uischema with FigTree before it even gets to JSONForms.

[CarlosNZ]

Closed as request is beyond the intended scope of the module.

[fatoskurtishi]

@VaralakshmiGoluguri did you find any solution for this ?

[CarlosNZ]

@fatoskurtishi -- just FYI, while the exact situation described by the original poster is not really possible, if what you want is just to have a dropdown whose options are dependent on the selection in another dropdown, this is quite straightforward. You can see an example of it in action in the country/city selectors in this JSON Forms demo: https://carlosnz.github.io/jsonforms-with-figtree-demo/