DEV Community

artydev
artydev

Posted on

Proxies and nested Objects

Recently I read an excellent post from the wizard John Lindquist

Proxies

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>
Enter fullscreen mode Exit fullscreen mode
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)
  })
})
Enter fullscreen mode Exit fullscreen mode

You can test it here Proxies

Top comments (0)