Filling form fields from JSON Array with JQuery clone

I have implemented JQuery Clone as in the following link :

http://jsfiddle.net/sunalive/gqQnJ/13/

The same transaction is used for posting and displaying values. I need to display the values from a JSON array (built using PHP from DB) which has values for multiple rows. The JSON Array sample is as below:

 [{"lineNo":"000001","txtLink":"sddf","txtSelect":"2","txtCheck":"X"},
  {"lineNo":"000002","txtLink":"sdfd","txtSelect":"4","txtCheck":""},
  {"lineNo":"000003","txtLink":"frf","txtSelect":"5","txtCheck":"X"}] 

While displaying the same, the row has to clone (as to the number of rows) and values to be shown in the appropriate fields. I will not know the name of the fields or what is coming in the JSON array as everything is generated dynamically at runtime. However, the field names will be of the notation item['fieldname'][] in my form (in the cloned line) where fieldname = key in the JSON array.

I was able to successfully clone rows as below where itemarr holds the JSON array.

  $(itemarr).each(function(index){ 
     $('.gridcontainer').append(emptyItems.clone());

  }

But I have no clue how to display the values into the form fields with dynamic clone.

Can anyone help me achieve this? Thanks for your time and help.

Update: I had found my solution (Thanks Andreas!) and the same is available in the following link:

http://jsfiddle.net/gqQnJ/27/

Answers


<table id="grid">
    <tr id="emptyItems" style="display:none">
        <td><input type="text" name="item['a'][]" /></td>
        <td><input type="text" name="item['b'][]" /></td>
        <td><input type="text" name="item['c'][]" /></td>
    </tr>
</table>

.

var rows = [
    { "a": 1.1, "b": 1.2, "c": 1.3 },
    { "a": 2.1, "b": 2.2, "c": 2.3 },
    { "a": 3.1, "b": 3.2, "c": 3.3 }
];

$(function() {
    $.each(rows, function(i, row) {
        var newRow = $("#emptyItems").clone().show().appendTo("#grid"),
            inputs = newRow.find("input");

        inputs.each(function() {
            var name = /item\['([^'])'\].*/.exec(this.name)[1];
            this.value = row[name] || "";
        });
    });
});

‚Äč Example


Need Your Help

Generate variables that equal dynamically created form elements

javascript jquery forms variables for-loop

In a previous question, I learned how to generate dynamic form elements with increasing element Ids.

How to loop over an Array of Arrays as reference?

arrays perl reference

The below code works if $a is an Array of Arrays, but I need $a to be an reference to the Array of Arrays.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.