Generate forms on-the-fly using EmberJS and JSON schema?

Question

I searched and found this question (GUI-based or Web-based JSON editor that works like property explorer) that has several links to resources that generate UI from JSON.

I am interested in any examples or known projects that show emberjs working with JSON Schema (http://json-schema.org/) to generate on-the-fly Forms. Projects such as:

• Alpacajs(http://www.alpacajs.org)
• json-editor(https://github.com/jdorn/json-editor)

Any Ideas?

Answer 1

Yes you can trivially generate forms dynamically based on some JSON.

You will need to map your JSON object into an array of keys in your router (or controller):

model: function() {
  var json = {a: 'red', b: 'yellow', c: 'blue'};
  var items = [], key;
  for (key in json) {
    if (json.hasOwnProperty(key)) {
      items.push({name: key, value: json[key]});
    }
  }
  return items;
}

And just use the each helper in your view:

{{#each field in content}}
  {{field.name}}: {{input type="text" value=field.value}}<br>
{{/each}}

I made a working JSBin with the above code.

Answer 2

There is Ember addon - ember-cli-dynamic-forms.

This addon is powered by alpacajs.