JS辞書から多次元フォームを作成する

Question

データをAPIに直接ポストするためのフォームを作成したいと思います。 JavaScriptでの辞書は、次のようになります。

{ 
     "Data": { 
      "Details": { 
       "name": bob, 
       "date": today 
      }, 
     "number": 1 
     } 
    }; 

APIに直接投稿することができ、HTMLフォームにこのデータを書き込むためにどのような方法がありますか？

あなたのAPIサーバは、拡張フォームデータの構文を受け入れる

Answer 1

限りおかげで、あなたが行うことができます：

<form method="POST" action="/your-endpoint"> 
    <input name="Details.name" value="bob" type="hidden" /> 
    <input name="Details.date" value="today" type="hidden" /> 
    <input name="number" value="1" type="hidden" /> 
    <button>Submit</button> 
</form> 

サーバーは、それが拡張構文をサポートし、あなたが言及したオブジェクトとしてそれを解析します。

Answer 2

これはあなたの例のHTML

<input id="name" type="text" value="initial value"/> 

である。これは、あなたのJSコードのようになります。

myobj = { 
    "Data": { 
     "Details": { 
      "name": "bob", 
      "date": "today" 
     }, 
    "number": 1 
    } 
}; 
// write the value into the form elements 
document.getElementById("name").value = myobj.Data.Details.name; 

このフィドルでそれを試してみてください：https://jsfiddle.net/98d3ar28/