How to POST an extjs tagfield as an array without it being in quotes

Question

I'm trying to POST a form using extjs. I have tagfields that need to be sent as json arrays. Here is one tagfield:

{
                    xtype: 'tagfield',
                    fieldLabel: 'Product(s)',
                    name: 'productIds',
                    store: {
                        type: 'products'
                    },
                    valueField: 'productId',
                    displayField: 'productName',
                    encodeSubmitValue: true //this is supposed to send an array per https://docs.sencha.com/extjs/6.0/6.0.0-classic/#!/api/Ext.form.field.Tag-cfg-encodeSubmitValue
                }

Here is the Ajax submit:

Ext.Ajax.request({
                        url: 'api/events/create',
                        method:'POST',
                        headers: { 'Content-Type': 'application/json' },
                        params : Ext.JSON.encode(form.getValues()),
                        success: function(form, action) {
                            Ext.Msg.alert('Success', action.result);
                        },
                        failure: function(form, action) {
                            //console.log(form.getForm().getValues());
                            Ext.Msg.alert('Submission failed.', 'Please make sure you selected an item for each required field.', action.result);
                        }
                    });

The JSON payload ends up looking like this:

{ "productIds": "[1,2]" }

The above array cannot be deserialized out of the string (the backend uses Jackson to de-serialize).

Does anyone know how to send the above as { "productIds": [1,2] } ?

Wouldn't it be invalid JSON without quotes? You have to parse I'm afraid. — Tarabass, Aug 06 '15 at 18:52
It's valid with and without quotes. Check http://jsonlint.com/ — kimli, Aug 06 '15 at 20:30

score 4 · Accepted Answer · answered Aug 06 '15 at 21:34

So when I removed encodeSubmitValue, it sent tagfield as an array without quotes automatically. Thanks for the ideas anyway!

Here's the tagfield without encodeSubmitValue:

{
                xtype: 'tagfield',
                fieldLabel: 'Product(s)',
                name: 'productIds',
                store: {
                    type: 'products'
                },
                valueField: 'productId',
                displayField: 'productName'
            }

Great! Good for you. Thanks for sharing. – Tarabass Aug 07 '15 at 18:22 — Tarabass, Aug 07 '15 at 18:22

score 0 · Answer 2 · answered Aug 06 '15 at 21:05

As you can see by executing Ext.JSON.encode({products: [1,2]}); the double quotes are not being added by the encode function. The problem is the Ext concept of making every form field compatible with old HTML forms and therefore return a string. If you override the getValue() (or possibly getRawValue()) function you can make it return the actual array.

How to POST an extjs tagfield as an array without it being in quotes

2 Answers2