inputDataToObject

by seanyang414

HTML

<form id='userForm'>
  id: <input type="text" name='id'/><br/>
  name: <input type="text" name='person.name'/><br/>
  email: <input type="text" name='person.email'/><br/>
  address line 1 : <input type="text" name='person.address.line1'/><br/>
  address line 2 : <input type="text" name='person.address.line2'/><br/>
</form>
<button id='getDataBtn'>click</button>

JavaScript

var getDataBtn = document.getElementById('getDataBtn');

getDataBtn.onclick = function() {
  var data = getData('userForm');
  console.log(data);
}

function getData(id) {
  var data = {};
  var form = document.getElementById(id);
  var allInputs = form.getElementsByTagName('input');
  for (let i = 0; i < allInputs.length; i++) {
    var str = allInputs[i].name;
    var val = allInputs[i].value;
    var strArr = str.split('.');
    generateObj(data, strArr, val);

    function generateObj(obj, arr, val) {
      if (arr.length === 1) {
        obj[arr[0]] = val
        return;
      } 

      var restArr = arr.splice(1);
      if (!obj[arr[0]]) {
        obj[arr[0]] = {};
      }
      generateObj(obj[arr[0]], restArr, val);
    }

  };
  return data;
}