そのため、データベースから返されたオブジェクトを引数として受け取る関数があります。オブジェクトの値をフォームに表示したい。値を設定するDOMセレクターごとにキーと値のペアを作成しました。関連するコードは次のとおりです。
function paintForm(item) {
let form = {
id: '',
name: document.getElementById('name'),
category: document.getElementById('category'),
subcategory: document.getElementById('subcategory'),
price: document.getElementById('price'),
quantity: document.getElementById('quantity'),
stock: document.getElementById('stock'),
operation: document.getElementById('operation'),
amount: document.getElementById('amount'),
log: document.getElementById('log')
}
Object.keys(item).forEach(key => {
let formItem = form[key]
formItem.setAttribute('value', item[key].toString())
})
}
関数（アイテム）の渡されたパラメーター
{
id: 'asdiu12189ascjo',
name: 'Nano',
category: 'Microcontrollers',
subcategory: 'Arduino',
price: 250,
quantity: 20,
log: ['a', 'b', 'c', 's']
},
これが私が試したものです：
内部HTML
Object.keys(item).forEach(key => {
form[key].innerHTML = item[key].toString()
})
値
Object.keys(item).forEach(key => {
form[key].value = item[key].toString()
})
私が理解していること
を使用Object[key]すると、オブジェクトの値が対応するキーに取得されます。さて、値を入力する必要があるかどうかはわかりません。値を文字列として保存してから解析する必要があると思いますか？しかし、フォームの値を処理するためのより良い方法があると思うので、これを投稿しました。
私はJSの経験があまりなく、フレームワークからプレーンなjsに切り替えようとしています。ですから、ライブラリやフレームワークを紹介しないでください。どんな助けでもありがたいです、そして貢献のために前もってすべてに感謝します。:)
コメントでウドE.によって正しく指摘したように、それらのすべてがある場合input fields valueに検証を追加するには、次の属性に移動するための方法であるformItemためとしてundefined返しますもしすべてでは。
Object.keys(item).forEach(key => {
let formItem = form[key];
if (formItem) {
formItem.value = item[key].toString();
}
});
formItem戻った場合undefined、ループ全体が無駄になりますか？絶対にありません。if句は、内に見つかりませんでしたいくつかの要素のためだけの余分なチェックですDOM経由document.getElementByIdでformオブジェクト。したがって、が見つからなかったvalueものにformItem.valueを割り当てることができなくなります。入力フィールドとフォームオブジェクト自体は事前定義されており、formItem常にwrtで見つかるため、あなたのケースでそれを考えるとid。if句は必要ではないかもしれません。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加