JSON based forms

by Rajesh Dixit

JavaScript

window.addEventListener('load', function(){
	createPageSettingsPopup({
  	title: "foo"
	})
})

function createPageSettingsPopup(page) {
  var form = utils.createForm(getFormData(page))
  document.body.appendChild(form)
}

// This can be stored in JSON file or in db ad then can be fetched
function getFormData(page){
	var json = {
    type: "div",
    params: {
      class: 'form-group',
      innerHTML: "",
    },
    children: [{
      type: 'label',
      params: {
        for: 'page-title',
        innerHTML: "Title"
      },
    }, {
      type: 'input',
      params: {
        type: 'text',
        class: "form-control",
        id: 'page-title',
        value: page.title
      }
    }]
  }
  return json
}

// This is a generic utility and can be exported to a utility file
var utils = (function() {
  function JSONBasedForm(form_json) {
    var el = "";
    if (form_json) {
      el = createMyElement(form_json.type, form_json.params);
      if (form_json.children && form_json.children.length > 0) {
        form_json.children.forEach(function(child) {
          var c_el = JSONBasedForm(child)
          c_el && el.appendChild(c_el)
        })
      }
    }
    return el;
  }

  function createMyElement(type, params) {
    var el = document.createElement(type);
    addProps(el, params)
    return el;
  }

  function addProps(el, props, key) {
    if (Object.keys(props).length) {
      for (var k in props) {
        if (typeof(props[k]) === "object") {
          addProps(el, props[k], k);
        } else {
          if (key) {
            el[key][k] = props[k]
          } else {
            el[k] = props[k]
          }
        }
      }
    }
  }

  return {
    createForm: JSONBasedForm
  }
})()