Create array of JavaScript objects from input form fields

Question

I'm working on a payment form and want to create an array of JS objects from the below HTML. The objects would have the following structure:

var myObject = {
    merchantGuid: 'string value',
    accessToken: 'string value',
    active: boolean,
    url: 'string value'
};

The DOM would look like this:

<input type="hidden" data-active="false" name="tokenDatas[0].merchantGuid" value="abc1234" />
<input type="hidden" data-active="false" name="tokenDatas[0].accessToken" value="586b30a1" />
<input type="hidden" data-active="false" name="tokenDatas[0].active" value="false" />
<input type="hidden" data-active="false" name="tokenDatas[0].url" value="https://test.example.com/api" />

<input type="hidden" data-active="true" name="tokenDatas[1].merchantGuid" value="def6789" />
<input type="hidden" data-active="true" name="tokenDatas[1].accessToken" value="ca1v2d17" />
<input type="hidden" data-active="true" name="tokenDatas[1].active" value="true" />
<input type="hidden" data-active="true" name="tokenDatas[1].url" value="https://test.example.com/api" />

Possible duplicate of jQuery create object from form fields

Mr. Perfectionist
– Mr. Perfectionist

2019-08-26 16:07:04 +00:00
Commented Aug 26, 2019 at 16:07 — Mr. Perfectionist
– Mr. Perfectionist, Commented Aug 26, 2019 at 16:07

Hoang Anh · Accepted Answer · 2019-08-26 16:28:33Z

You can use this JS code.

let fields = {};
    let inputs = document.querySelectorAll('input');
    for(let i = 0; i < inputs.length; i++){
      let data = inputs[i].getAttribute("name");
      fields[data] = data;
}

<input type="hidden" data-active="false" name="tokenDatas[0].merchantGuid" value="abc1234" />
<input type="hidden" data-active="false" name="tokenDatas[0].accessToken" value="586b30a1" />
<input type="hidden" data-active="false" name="tokenDatas[0].active" value="false" />
<input type="hidden" data-active="false" name="tokenDatas[0].url" value="https://test.example.com/api" />

<input type="hidden" data-active="true" name="tokenDatas[1].merchantGuid" value="def6789" />
<input type="hidden" data-active="true" name="tokenDatas[1].accessToken" value="ca1v2d17" />
<input type="hidden" data-active="true" name="tokenDatas[1].active" value="true" />
<input type="hidden" data-active="true" name="tokenDatas[1].url" value="https://test.example.com/api" />

Collectives™ on Stack Overflow

Create array of JavaScript objects from input form fields

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related