Recently I read an excellent post from the wizard John Lindquist
Here is an example adapted from this :
<table>
<tr><td>Nom</td><td><input data-key= "nom" /></td></tr>
<tr><td>Prénom</td><td><input data-key= "prenom" /></td></tr>
<tr><td>Age</td><td><input data-key = "age" type="number" /></td></tr>
<tr><td>rue</td><td><input data-key ="rue" /></td></tr>
</table>
<div id="app"></div>
let person = {
name: {
prenom: 'John',
nom: "Doe"
},
age: 59,
adresse : {
rue : "des marronniers",
num : 2
}
}
let handler = {
get(target, prop) {
let value = target[prop]
if (value) {
if (typeof value === 'object') {
return new Proxy(value, handler)
}
return value
}
return new Proxy({}, handler)
},
set(target, property, value) {
target[property] = value;
render ();
return true;
}
}
person = new Proxy(person, handler)
function updateForm (e) {
let key = e.getAttribute("data-key")
person.name[key] = (e.value)
}
function render () {
var str = JSON.stringify(person, null, 4);
app.innerHTML = `
<pre style="font-size:24px">${str}</pre>`
}
render()
document.querySelectorAll('[data-key]').forEach(item => {
item.addEventListener('input', event => {
updateForm(event.target)
})
})
You can test it here Proxies