logo标签列表

使用数组的forEach方法在两行中动态将对象的值添加到输入框中。

javascriptarraysmethods
4

我有一个带有多个键和值的对象，我想将其值添加到与对象键对应的输入中。但我希望使用数组方法（forEach）以动态和通用的方式完成这个操作，并且只需两行代码。

我的对象：

const createNewBill = {
  type: "Hôtel et logement",
  name: "bill test",
  date: "2020-04-08",
  amount: 130,
  pct: 25,
  file: 'hotel.jpg'
}

我发现这种方法不够动态和可扩展：
document.getByTestId("expense-type").value = createNewBill.type
document.getByTestId("expense-name").value = createNewBill.name
document.getByTestId("datepicker").value = createNewBill.datepicker
document.getByTestId("amount").value = createNewBill.amount
document.getByTestId("pct").value = createNewBill.pct
document.getByTestId("file").value = createNewBill.file
你是否考虑过使用ReactJS、Angular或其他能够为你提供视图/绑定功能的库？ - Xavier Garnier
@XavierGarnier 我一会儿就开始学习REACT，目前我正在学习原生JS！但还是谢谢你的建议。 - Willem JOURET
3个回答
1
你可以使用Object.keys() 方法和 模板字面量（Template literals） 语法来实现此功能。
const createNewBill = {
  type: "Hôtel et logement",
  name: "bill test",
  date: "2020-04-08",
  amount: 130,
  pct: 25,
  file: 'hotel.jpg'
};

Object.keys(createNewBill).forEach(key => {
    document.getByTestId(`expense-${key}`).value = createNewBill[key]
})
1
感谢您关于模板字符串的提示！ ;) - Willem JOURET
1

const createNewBill = {
  type: "Hôtel et logement",
  name: "bill test",
  date: "2020-04-08",
  amount: 130,
 }

 Object.keys(createNewBill).forEach(key => {
   document.getElementById(key).value = createNewBill[key]
 });
<!DOCTYPE html>
<html lang="en">
    <body>
        <input id="type" />
        <input id="name" />
        <input id="date" />
        <input id="amount" />
    </body>
</html>

如果您能将对象的键更改为与HTML ID相同的键或反之，则我可以建议一种解决方案。

Object.keys(createNewBill).forEach(key => {
  document.getByTestId(key).value = createNewBill[key]
});
非常感谢，您的回答很有帮助！ - Willem JOURET
1
我猜这样做可能会起作用：
Object.entries(createNewBill).forEach(([key, value]) =>
  document.getByTestId(key).value = value);

但是这需要你将expense-type重命名为type，同样的，将expense-name和datepicker也重命名。或者对所有其他的内容使用相同的前缀。

无论如何，我强烈建议您使用ReactJS、Angular或任何可以让这种事情变得更容易的库！

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接