AJAX Data with Dynamic form fields name

Question

Hello how can can make my ajax data call to be dynamic, I tried this

var opt_name = $(".NAME").data('opt_name');
    var opt_business = $(".BUSINESS").data('opt_business');
    var opt_phone = $(".PHONE").data('opt_phone');
    var opt_email = $(".EMAIL").data('opt_email');
    var opt_unique_name=$(".UNIQUE_NAME").data('opt_unique_name');
    
    var opt_name_val = $(".NAME")[key].value;
    var opt_business_val = $(".BUSINESS")[key].value;
    var opt_phone_val = $(".PHONE")[key].value;
    var opt_email_val = $(".EMAIL")[key].value;
    var opt_u_val = $(".U_VAL").data('opt_u_val');
    var opt_userid_val = $(".USER_ID_VAL").data('opt_user_id_val');
    var dataString = {'u': opt_u_val,
            'id': opt_userid_val,
            opt_email: opt_email_val,
            opt_name : opt_name_val,
            opt_phone : opt_phone_val,
            opt_business : opt_business_val,
            opt_unique_name : ''};
    $.ajax({
        type: 'post',
        url: 'https://vative.us15.list-manage.com/subscribe/post',
      
        dataType: "json",
      data: dataString, // should be the same as below
      // data: {
        //     'u': '559dd913b49efd5f5515155bb',
        //     'id': '0985c209f3',
        //     'MERGE0': opt_email_val,
        //     'NAME' : 'Test 3',
        //     'PHONE' : '829121',
        //     'BUSINESS' : 'hskslas',
        //     'b_559dd913b49efd5f5515155bb_0985c209f3' : ''
        // },
        success: function(data) {
            console.log('Submitted');
        },
        
        error: function(data){
            console.log('Error');
          console.log(dataString);
        }
    });
}
 

});

I just want to get the field name since this field names always changes depending on the database or from embedded form.

The problem on my above code is that this will work.

data: {
             'u': '559dd913b49efd5f5515155bb',
             'id': '0985c209f3',
             'MERGE0': opt_email_val,
             'NAME' : 'Test 3',
             'PHONE' : '829121',
             'BUSINESS' : 'hskslas',
             'b_559dd913b49efd5f5515155bb_0985c209f3' : ''
         },

but not this

 data: {'u': opt_u_val,
            'id': opt_userid_val,
            opt_email: opt_email_val,
            opt_name : opt_name_val,
            opt_phone : opt_phone_val,
            opt_business : opt_business_val,
            opt_unique_name : ''};

Answer 1

In order to generate dynamic keys inside your object, there is a very clean approach in the new ES2015 standard for JavaScript (formerly called ES6).

The syntax is the following:

var obj = {
  [myKey]: value,
}

So your code would look like this:

data: {'u': opt_u_val,
    'id': opt_userid_val,
    [opt_email]: opt_email_val,
    [opt_name]: opt_name_val,
    [opt_phone]: opt_phone_val,
    [opt_business]: opt_business_val,
    [opt_unique_name]: ''
};