Question

我正在处理付款表单，并希望从下面的HTML创建一个JS对象数组。这些对象将具有以下结构：

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

DOM看起来像这样：

<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" />

Answer 1

您可以使用此JS代码。

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" />

从输入表单字段创建JavaScript对象数组

1 个答案: