javascript - 使用 jQuery 将输入字段解析为格式化的 json

Question

我正忙于表单重复，当按下提交时，我希望它以以下格式解析为 json：

{ "dependant1": [
  { "name": "daniel"},
  ],"dependant2": [
  { "name": "steve"},
  ]
}

对于每个添加的依赖项，目前，如果我添加多个依赖项，则返回“{} {}”，但如果只有一个依赖项，则返回“{“name”：“steve”}。

非常感谢任何帮助。继承人的代码：

jQuery：

        //Clone Tracking
var g_counter = 1;
var d_counter = 1;
var dependant = ["dependant"];
var group;
//Clone Tracking
//General Variables
var name_input_groups = ["name-group-1"];
//General Variables
//Generate variables
var name_fields=[0];
var name_input = "<input class='name' />";
//Generate variables
jQuery(document).ready(function(e) {
    jQuery(name_fields).each(function() {
        jQuery(name_input).appendTo('#name-group-1');
    });
    //populate jquery generated fields
    //Cloning Function
    jQuery('#clone').click(function() {
        clone_dependant();
    });

    function clone_dependant() {
        // Store the value of the previous Id to insert the cloned div..
        var oldId = g_counter;
        g_counter++;
        // Clone the Dependant Div and set a new id
        var $clonedDiv = jQuery('#dependant-1').clone(false).attr('id', 'dependant-'+g_counter);
        var name_newDiv = 'name-group-'+ g_counter;
        // Find div's inside the cloned object and set a new id's
        $clonedDiv.find('#name-group-1').attr('id',"name-group-" + g_counter );
        // You don't need to Loop thru the inputs to set the value
        $clonedDiv.find('input').val('');
        // Insert the cloned object 
        $clonedDiv.insertAfter("#dependant-" + oldId);
        name_input_groups.push(name_newDiv);
    };
    //Cloning Function
    function validate_gen() {};
//submit function
var dep_counter = 0
jQuery('#submit').click(function(){
    $('.dependant').each(function(k, v){
        dep_counter++;
        var dependants = {};
    dependants['name'] = jQuery("#name-group-" + dep_counter).find('input').val();
        var json = JSON.stringify(dependants); 
        console.log(json);
    });
});
});

和继承人的HTML：

<div id="dependant-1" class="dependant">
    name<div id="name-group-1"></div>
</div>
<div id="test"></div>

<button id="clone">clone</button>
<button id="submit">submit</button>

和 jsFiddle 链接 - http://jsfiddle.net/dawidvdh/TzRu8/2/

谢谢。

Answer 1

只需使用以下代码即可完美运行：

    var result = {};
var dependants;
jQuery('#submit').click(function(){
    $('.dependant').each(function(k, v){
        dependants = {};
        dependants['name'] = $(v).find('.name').val();
        dependants['surname'] = $(v).find('.surname').val();
        dependants['id'] = idNumber;
        dependants['age'] = $(v).find('.age').val();
        dependants['gender'] = $(v).find('.gender').val();
        dependants['cell'] = cell_values;
        dependants['passport'] = pass_values;
        dependants['relationship'] = $(v).find('.relationship:checked').val();
        result['dependant'+g_counter] = [dependants];
    });

    var jsonData = JSON.stringify(result);

    console.log(jsonData);

    $.ajax({
        type: "POST",
        url: "mail.php",
        dataType: "json",
        data: {parameters: jsonData}
    });

});

感谢大家 ：）

Answer 2

您的 json 格式错误。您可以使用http://jsonlint.com/来验证您的 json 格式。

例如，这是一个正确的格式

 { "dependant1": [{ "name": "daniel"}] },
 { "dependant2": [{ "name": "steve" }] }

您需要重新编写脚本以生成有效的 json 格式。按照上面的模式添加更多的依赖项....除非 steve 是 daniel 的子依赖项，否则结构更接近于您开始时的结构。

Answer 3

您的代码中有两个错误。

1：

$clonedDiv.find('#name-group-1').attr('id',"#name-group-" + g_counter );

'name-group' 之前应该没有'#'：

$clonedDiv.find('#name-group-1').attr('id',"name-group-" + g_counter );

2：

dependants['name'] = jQuery("#name-group-" + g_counter ).val();

其中“g_counter”应该是“dep_counter”。

[更新]

哦，对不起，我忘记了第三个错误：

dependants['name'] = jQuery("#name-group-" + dep_counter ).val();

应该：

dependants['name'] = jQuery("#name-group-" + dep_counter ).find('input').val();

修复这些错误后，您可以使用以下代码获得所需的内容：

var dep_counter = 0
var result = {};
jQuery('#submit').click(function(){
    $('.dependant').each(function(k, v){
        dep_counter++;
        var dependants = {};
        dependants['name'] = jQuery("#name-group-" + dep_counter).find('input').val();
        result['dependant'+dep_counter] = [dependants];
    });
    console.log(JSON.stringify(result));
});