#Current object index in JSON form?

1 messages · Page 1 of 1 (latest)

ornate oriole
#

Hi,
I'm currently using an Object field within a JSON form to allow adding multiple sub-items using the same form. The JSON form is set up with an input data that looks something like:
{ "prop1": "", "prop2": "", "subItems": [ { "category": "fruit", "item": "apple" }, { "category": "vegetable", "item": "" }, { "category": "", "item": "" } ] }

I've run into trouble trying to filter down the options in a select field using the input to another select field within one of the sub items.

The root of the issue is that I can't seem to find a way to reference the current sub-item within the array. For example, if I feed the above code into a JSON form and want to filter down the available options for "item" based on the selection for "category", I can't figure out a way to do this because I can't see a way to figure out that the selected "category" for the current sub item is e.g. "vegetable".

Is there a way to access the index of the current item in a list in the Object field within a JSON form?

dusk condorBOT
#

Hello! I'm AppsmithBot, here to assist you with your Appsmith queries.

To access the index of the current item in a list within a JSON form, you can use the currentIndex property. This property is available for widgets placed inside a List widget and allows you to configure the widget's properties based on the position/order of the item?5:0?source?.

For your specific use case, where you want to filter options in a select field based on another select field within the same sub-item, you can use the currentItem and currentIndex properties. Here's a basic example of how you might set this up:

  1. Bind the Select Widget: Use the currentItem to bind the data for each select widget. For example, if you have a select widget for categories, you can bind it like this:

{?{ currentItem.category }?}

  1. Filter Options Based on Selection: Use the onOptionChange event of the category select widget to filter the options for the item select widget. You can use a JavaScript function to achieve this:

export default {
filterItems: () => {
const selectedCategory = currentItem.category;
// Assuming you have a data source or array of items
const allItems = [
{ category: "fruit", item: "apple" },
{ category: "vegetable", item: "carrot" },
// more items...
];
return allItems.filter(item => item.category === selectedCategory);
}
}

  1. Bind Filtered Data: Bind the filtered data to the item select widget:

{?{ JSObject1.filterItems() }?}

This setup allows you to dynamically filter the options in one select widget based on the selection in another, all within the same sub-item of your JSON form?5:0?source??5:4?source?.

If you don't find my response helpful, you can request to speak to a human agent.