javascript - 如何使用 dom 选择器作为对象中的值来迭代对象，然后使用它们来设置值？

Question

所以，我有一个函数将从数据库返回的对象作为参数。我想在表单中显示对象的值。我为每个要设置值的 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()
})

值(value)

Object.keys(item).forEach(key => {
    form[key].value = item[key].toString()
})

<小时/>

我的理解

使用Object[key]可以获取对象对应键的值。现在，我不确定是否必须输入该值。我认为该值必须存储为字符串然后解析？但我发布此内容是因为我认为有更好的方法来处理表单值。

我对 JS 不太有经验，我只是尝试从框架切换到纯 js。因此，请不要向我推荐库或框架。感谢您的帮助，并提前感谢大家的贡献。 :)

Answer 1

正如 Udo E. 在评论中正确指出的那样，如果所有这些都是 input fields value 属性就是正确的方法:在 formItem 上添加验证 至于 undefined 则返回(如果有的话)。

Object.keys(item).forEach(key => {
          let formItem = form[key];
          if (formItem) {
            formItem.value = item[key].toString();
          }
        });  

if one formItem returns undefined, then the entire loop is a waste? absolutely no. The if clause is just an extra check for some element that wasn't found in in DOM via document.getElementById in form object. So if will prevent you from assigning a value to something formItem.value that wasn't found. To think of it in your case since input fields and the form object itself is predefined and formItem will always be found w.r.t id. The if clause might not be necessary.