How to change input key name of multi dimensional array with JavaScript/jQuery

Question

I need change input key name (this key name is dynamic), like name="field[value][status]" to something like name="field[my_new_value][status]" and keeping values os status, name, age, etc...

var all_fields = $('[data-fields]');

var some_field = $(all_fields[2]).find('[name]');
// some_field[0] => fieldname[][status]
// some_field[1] => fieldname[][name]
// some_field[2] => fieldname[][age]

var field_dinamyc = $(all_fields[3]).find('[name]');
// field_dinamyc[0] => fieldname[dynamic_key][status]
// field_dinamyc[1] => fieldname[dynamic_key][name]
// field_dinamyc[2] => fieldname[dynamic_key][age]

console.log(some_field);
console.log(field_dinamyc);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-fields>
  <input type="text" name="fieldname[1][status]" value="status field 1" />
  <input type="text" name="fieldname[1][name]" value="name field 1" />
  <input type="text" name="fieldname[1][age]" value="age field 1" />
</div>

<div data-fields>
  <input type="text" name="fieldname[2][status]" value="status field 2" />
  <input type="text" name="fieldname[2][name]" value="name field 2" />
  <input type="text" name="fieldname[2][age]" value="age field 2" />
</div>

<div data-fields>
  <input type="text" name="fieldname[][status]" value="status field no key id" />
  <input type="text" name="fieldname[][name]" value="name field no key id" />
  <input type="text" name="fieldname[][age]" value="age field no key id" />
</div>

<div data-fields>
  <input type="text" name="fieldname[dynamic_key][status]" value="status field any" />
  <input type="text" name="fieldname[dynamic_key][name]" value="name field any" />
  <input type="text" name="fieldname[dynamic_key][age]" value="age field any" />
</div>

Small side note; instead of doing $(all_fields[3]) since all_fields is already a jQuery object, you can do just $all_fields.eq(3) and you don't have to re-wrap the unwrapped element. — Taplar
– Taplar, Commented Dec 22, 2017 at 22:42

sorak · Accepted Answer · 2017-12-23 01:59:02Z

2

If you want to overwrite the first array name of each group to the group's numeric id in the list, you could use:

$('[data-fields]').each(function(i, fields){
        // Loop over data-fields groups and grab their index
        $('input', fields).each(function(){
                // Rename first array value from name to group index
                $(this).attr('name', $(this).attr('name').replace(/e\[[^\]]*\]/, 'e['+(i+1)+']')); 
            });
    });

edited Dec 23, 2017 at 1:59

answered Dec 22, 2017 at 22:59

sorak

2,6332 gold badges18 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

rafaelfndev Over a year ago

I need to change without know the key name, changing all 4 fieldname keys, like fieldname[] to fieldname[1], filedname[any] to fieldname[2], fieldname[dynamic_key_name] to fieldname[3] and etc... The key of fieldname is dynamic, I can't use replace([2], '[42]) because I don't have the key name...

sorak Over a year ago

How do you want to specify what to change?

rafaelfndev Over a year ago

Set each fieldname[any_key] to fieldname[1], fieldname[2], fieldname[3], etc... in order. All the key name have a dynamic name, I need to set to 1, 2, 3...

sorak Over a year ago

Is that more what you're looking for?

rafaelfndev Over a year ago

Exactly! I knew I could do it with regex, but I thought I had some way to do it with jquery. Thanks anyway!

|

Collectives™ on Stack Overflow

How to change input key name of multi dimensional array with JavaScript/jQuery

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related