从表单构建JSON对象

时间:2013-03-22 06:37:19

标签: javascript json

我有一个具有以下格式的表单(只有表单的一部分)

<input type="text" name="Journal[data][serviceaddress][company]" value="{{company}}"/>
<input type="text" name="Journal[data][serviceaddress][address]" value="{{address}}"/>
<input type="text" name="Journal[data][serviceaddress][zip]" value="{{zip}}"/>
<textarea name="Journal[data][serviceaddress][notes]">{{notes}}</textarea>
<input type="text" name="Journal[rows][1][title]"/>
<input type="text" name="Journal[rows][1][body]"/>
<input type="text" name="Journal[rows][2][title]"/>
<input type="text" name="Journal[rows][2][body]"/>

我想将其转换为以下JSON对象

{
    data:{
        serviceaddress:{
            company: "companyvalue",
            address: "addressvalue",
            zip: "zipvalue",
            notes: "notesvalue"
        }
    },
    rows:{
        1:{
            title: "row1title",
            body: "row1body"
        },
        2:{
            title: "row2title",
            body: "row2body"
        }
    }
}

哪种方法最好?我认为我必须是一个已经这样做的人,但我在搜索时发现的只是想要输入名称作为关键而不是嵌套的JSON数据的人......

1 个答案:

答案 0 :(得分:1)

由于我找不到任何现有的东西,我发现这是一个令人满意的解决方案,我创建了自己的,在这里它是

function getData(){
            var data = {};
            $('.data input,.data textarea').each(function(){
                var val = $(this).val();
                var namestr = $(this).attr('name').substr(8);
                namestr = namestr.substring(0,namestr.length-1);
                var namearray = namestr.split('][');

                var currentlevel = data;
                if (namearray[0] == 'data'){
                    namearray = namearray.splice(1,namearray.length);
                    for (var i=0;i < namearray.length;i++){
                        if (currentlevel[namearray[i]] == undefined && i != namearray.length-1){
                            currentlevel[namearray[i]] = {};
                        }
                        else if (namearray.length-1 == i){
                            currentlevel[namearray[i]] = val;
                            break;
                        } //In the end, put a value
                        currentlevel = currentlevel[namearray[i]]
                    }   
                }
            });
            return data;
        }

正如您所看到的,这只会查看input / textarea-tags,其中名称中的第一个“array”参数是“data”,即它只会解析其名称格式为“Myform [data]”的字段[VALUE1]”。这可以根据您自己的需要轻松修改。