JavaScript convert object with dynamic property length to array

Question

I have a form (fields are created dynamically with javascript)

<input type="text" name="item[0][name]" />
<input type="text" name="item[0][email]" />
<input type="text" name="item[0][address]" />

<input type="text" name="item[1][name]" />
<input type="text" name="item[1][email]" />
<input type="text" name="item[1][address]" />

<input type="text" name="item[2][name]" />
<input type="text" name="item[2][email]" />
<input type="text" name="item[2][address]" />

On form submit I get values with javascript function:

var obj = serializeObject(form)

function serializeObject(form) {
var o = {};
var a = form.serializeArray();
$.each(a, function () {
    if (o[this.name] !== undefined) {
        if (!o[this.name].push) {
            o[this.name] = [o[this.name]];
        }      
        o[this.name].push(this.value || '');
    } else {
        o[this.name] = this.value || '';
    }
});
return o;
};

I get an object with dynamic length (3 shown in an example item[0], item[1], item[2]). Object will always have this number of levels, and "item" is always the same property, only can contain other properties (except name, email, and address shown)

var obj = {

item[0][name]:'a',
item[0][email]:'a1',
item[0][address]:'a2',

item[1][name]:'b',
item[1][email]:'b1',
item[1][address]:'b2',

item[2][name]:'c',
item[2][email]:'c1',
item[2][address]:'c2',

}

I want to convert it into this format:

var arr = [
   {name:'a', email:'a1', address:'a2'},
   {name:'b', email:'b1', address:'b2'},
   {name:'c', email:'c1', address:'c2'}
]

What is the best way to convert it (without hardcoding like this):

var arr = [];
var o1 = {name:'a', email:'a1', address:'a2'};
var o2 = {name:'b', email:'b1', address:'b2'};
var o3 = {name:'c', email:'c1', address:'c2'};
arr.push(o1);
arr.push(o2);
arr.push(o3);

what is item? what do you have? why not take the object literal? — Nina Scholz
– Nina Scholz, Commented Dec 18, 2022 at 15:02
The first block of code in the question is syntactically wrong. — Pointy
– Pointy, Commented Dec 18, 2022 at 15:02

Nina Scholz · Accepted Answer · 2022-12-18 16:58:07Z

You could take names in the form of a dot separated property string and get the parts and build new objects of it.

function serializeObject(form) {
    const
        matches = form.querySelectorAll("input"),
        result = [];
    
    matches.forEach(input =>
        input.name.split('.').reduce((o, k, i, a) => o[k] ??= i + 1 === a.length ? input.value : {}, result)
    );
    console.log(result);
};

const
    input = document.getElementById('input');

input.addEventListener('submit', () => serializeObject(input));

<form id="input" onsubmit="return false">
  <input type="text" name="0.name" />
  <input type="text" name="0.email" />
  <input type="text" name="0.address" />
  <br>
  <input type="text" name="1.name" />
  <input type="text" name="1.email" />
  <input type="text" name="1.address" />
  <br>
  <input type="text" name="2.name" />
  <input type="text" name="2.email" />
  <input type="text" name="2.address" />
  <br>
  <input type="submit">
</form>

pier farrugia · Accepted Answer · 2022-12-18 15:26:45Z

0

your syntax doesn't work:

    let obj = {
        item[0][name]:'a'
    }

array brackets in key object is not ok syntax there after is ok:

    let obj = {
        item0name:'a'
    }

So regarding your actual syntax, no iteration possible

answered Dec 18, 2022 at 15:26

pier farrugia

1,5952 gold badges5 silver badges9 bronze badges

1 Comment

Toniq Over a year ago

I have updated the question, I get this from php form. Thats why keys looks like that.

Collectives™ on Stack Overflow

JavaScript convert object with dynamic property length to array

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related