Menu
I have an object with several keys and values, I would like to add its values to inputs corresponding to the key of the object. But I want to do this dynamically and generically using a method of array (forEach) in a two line code.
My object:
const createNewBill = {
type: "Hôtel et logement",
name: "bill test",
date: "2020-04-08",
amount: 130,
pct: 25,
file: 'hotel.jpg'
}
I found this way but it is not dynamic and scalable :
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
353
asked Oct 19 '25 03:10
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>One solution that I can suggest if you could change the keys of the object to the same ones in your HTML IDs or vice versa.
Object.keys(createNewBill).forEach(key => {
document.getByTestId(key).value = createNewBill[key]
});
I'm guessing that something like could work:
Object.entries(createNewBill).forEach(([key, value]) =>
document.getByTestId(key).value = value);
But it would require you to rename expense-type into type and same for expense-name and datepicker. Or to use the same prefix for all the other ones.
Anyway, I strongly recommend you to use a lib like ReactJS, Angular or anything that will make this king of things easier for you!
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
