我有一个带有多个键和值的对象，我想添加它的值对应于对象的键的输入。但我想在两行代码中使用数组(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
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]
});
我猜类似的东西可以工作：
Object.entries(createNewBill).forEach(([key, value]) =>
document.getByTestId(key).value = value);
但它需要将expense-type重命名为type，expense-name和datepicker也是如此。或者对所有其他前缀使用相同的前缀。
无论如何，我强烈建议你使用像ReactJS、Angular之类的库，或者任何能让你更轻松的东西！
您可以通过使用Object.keys()方法和Template literals (Template strings)语法来实现这一点。
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]
})