JSON 格式資料如何拆解成 form 的輸入項

Posted on Edited on In Word count in article: 176 Reading time ≈ 1 mins.

拆解 JSON 格式資料

下方是 JSON 格式資料

1
2
3
4
{
   "item": "1",
   "items": ["1","2"],
}

基本物件型別拆解

基本物件型別的拆解如下

1
2
3
"item": "1"
可拆解成:
<input type="text" name="item" value="1"><br>

陣列型別拆解

陣列部分需依造陣列結構做拆解

1
2
3
4
"items": ["1","2"]
可拆解成:
<input type="text" name="items[0]" value="1">
<input type="text" name="items[1]" value="2">

完整拆解設定

最後是完整的 HTML form 設定

1
2
3
4
5
6
<form action="/api/Test/Post" method="post">
  <input type="text" name="item" value="1"><br>
  <input type="text" name="items[0]" value="1"><br>
  <input type="text" name="items[1]" value="2"><br>
　<input type="submit" value="送出表單">
</form>

📜 參考資料

  1. POST an array from an HTML form without javascript