将嵌套的json对象值绑定到表单字段

Question

I am building a dynamic form to edit data in a json object. First, if something like this exists let me know. I would rather not build it but I have searched many times for a tool and have found only tree like structures that require entering quotes. I would be happy to treat all values as strings. This edit functionality is for end users so it needs to be easy an not intimidating.

So far I have code that generates nested tables to represent a json object. For each value I display a form field. I would like to bind the form field to the associated nested json value. If I could store a reference to the json value I would build an array of references to each value in a json object tree. I have not found a way to do that with javascript.

My last resort approach will be to traverse the table after edits are made. I would rather have dynamic updates but a single submit would be better than nothing.

Any ideas?

// the json in files nests only a few levels. Here is the format of a simple case,
{
 "researcherid_id":{
  "id_key":"researcherid_id",
  "description":"Use to retrieve bibliometric data",
  "url_template" :[
    {
      "name": "Author Detail",
      "url": "http://www.researcherid.com/rid/${key}"
    }
  ]         
 }
}

$.get('file.json',make_json_form);

function make_json_form(response) {

   dataset = $.secureEvalJSON(response);
   // iterate through the object and generate form field for string values.

}

// Then after the form is edited I want to display the raw updated json (then I want to save it but that is for another thread)

// now I iterate through the form and construct the json object
// I would rather have the dataset object var updated on focus out after each edit.

function show_json(form_id){
 var r = {};
 var el = document.getElementById(form_id);
 table_to_json(r,el,null);
 $('body').html(formattedJSON(r));
}

Answer 1

A much simpler approach would be to accept a form submission and output the data in JSON format. That way, there is no need to bind variables.

Answer 2

The solution has arrived. JQuery now has plugins for data binding and templates.

http://www.borismoore.com/2010/09/introducing-jquery-templates-1-first.html http://api.jquery.com/jQuery.template/ http://api.jquery.com/category/plugins/data-link/

Answer 3

There is another simple template engine that loads JSON data directly into the form. See http://plugins.jquery.com/project/loadJSON plugin. It works similar way as the one that Jack placed here but it uses plain HTML for template.

You can see instructions how to use it on the http://code.google.com/p/jquery-load-json/wiki/WorkingWithFormElements and live example on the http://jquery-load-json.googlecode.com/svn/trunk/edit.html?ID=17 .