Uncaught TypeError: Cannot read property 'options' of undefined

[tvgarden]

I am making an ajax call when an Ui Component field 'attribute_id' is changed.

I would like to populate the other field "attribute_item_value".

However I am getting an error:

Uncaught TypeError: Cannot read property 'options' of undefined

Would you suggest what is wrong with this code?

My code is :

   $.ajax({
                        url: '../../index/customajax',
                        showLoader: true,
                        data: {form_key: window.FORM_KEY, 'value':value},
                        type: "POST",
                          dataType : 'json',
                        success: function(data){
                        
                           console.log(data.array);

            uiRegistry.get('index = attribute_item_value').options(data.array);
                        }
                    });

The form "item_form.xml"

<field name="attribute_id">
    <argument name="data" xsi:type="array">
        <item name="options" xsi:type="object">Vendor\Module\Model\Source\Myvalues</item>
        <item name="config" xsi:type="array">
            <item name="dataType" xsi:type="string">text</item>
            <item name="label" translate="true" xsi:type="string">Attribute</item>
            <item name="component" xsi:type="string">Vendor_Module/js/form/element/options</item>
            <item name="formElement" xsi:type="string">select</item>
            <item name="sortOrder" xsi:type="number">210</item>
        </item>
    </argument>
</field>

<field name="attribute_value_id" >
    <argument name="data" xsi:type="array">
        <item name="options" xsi:type="object">Vendor\Module\Model\Source\Myvalues</item>
        <item name="config" xsi:type="array">
            <item name="dataType" xsi:type="string">text</item>
            <item name="label" translate="true" xsi:type="string">Attribute Value</item>
            <item name="component" xsi:type="string">Vendor_Module/js/form/element/options</item>
            <item name="formElement" xsi:type="string">select</item>
            <item name="sortOrder" xsi:type="number">211</item>
        </item>
    </argument>
</field>

[theMageComp]

Hello @tvgarden

I have gone through your whole code and I found that...

uiRegistry.get('index = attribute_item_value').options(data.array);

Which you are trying to access is an undefined property.
Please make sure that object is available and then use it with a different property.

[tvgarden]

Hello @theMageComp,

Thanks for your reply.

I just found the name was wrong, I changed

uiRegistry.get('index = attribute_item_value').options(data.array);

to

uiRegistry.get('index = attribute_value_id').options(data.array);

 but still not populating. (No error).

Do you have any suggestions?

[tvgarden]

Hi

I have too few resources for this topic and spent hours and hours looking for a solution.

I would like to populate the second select input when the first select value is changed.

The first one is a list of attributes, and second one is the list of attribute values.

Any suggestions are appreciated.

[line_hammer]

This error occurs in Chrome Browser when you read a property or call a method on an undefined object . Uncaught TypeError: Cannot read property of undefined error is probably easiest to understand from the perspective of undefined, since undefined is not considered an object type at all (but its own undefined type instead), and properties can only belong to objects within JavaScript. There are a few variations of this error depending on the property you are trying to access. Sometimes instead of undefined it will say null.