Serialize and deserialize complex json

how to map the JSON to a complex object, for example, an Employee object has a Company field , how to serialize and deserialize json to form field ?

Thanks


{id:'1234', name:'john', company:{name:'ABC', type:'Retail'}}

<form>
<input name="id" type="input" />
<input name="name" type="input" />
<input name="company.id" type="input" />
<input name="company.type" type="input" />
</form>

Not sure how much sense this makes, but you could do:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>My serialize</title>
  </head>
  
  <body>
    <form>
      <input name="id" type="input" /> 
      <input name="name" type="input" /> 
      <input name="company_name" type="input" />
      <input name="company_type" type="input" />
    </form>

    <script>
      function mySerialize(json, prependText){
        var keys = Object.keys(json);

        for (var i=0; i<keys.length; i++){
          if(typeof json[keys[i]] === 'object'){
            mySerialize(json[keys[i]], 'company_');
          } else {
            field = prependText + keys[i];
            document.forms[0][field].value = json[keys[i]];
          }
        }
      }

      var details = {id:'1234', name:'john', company:{name:'ABC', type:'Retail'}};
      mySerialize(details, '');
    </script>
  </body>
</html>

Just a quick HTML observation. I’d probably use form fieldsets to keep with the JSON structure.


<form>
  <input name="id" type="input" />
  <input name="name" type="input" />
  <filedset name="company">
    <input name="id" type="input" />
    <input name="type" type="input" />
  </fieldset>
</form>