Input field動態產生JSON

緣由

  • 實務上常常需要取得input field輸入值，再將其組成JSON後發送給後端接收
  • 但是每增加一個input field是否可以動態產生JSON，而不需修改Javascript組JSON程式碼

做法

  • Array.from()：將jquery取得的$(‘input’)組成array
  • Array.reduce()：將初始值{}藉由每個reduce加入新的key / value

HTML

1
2
3
4
5
<div>
  <input type="text" name="account" />
  <input type="text" name="password" />
  <button onclick="submit()">submit</button>
</div>

Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const submit = () => {
    const result = 
      Array.from($('input'))
        .reduce((before, after) => {
          const name = $(after).attr('name');
          const value = $(after).val();
          return {
            ...before,
            [name]: value
          }
        }, {}); 
  
    alert(JSON.stringify(result));
}

Result