如何将多级JavaScript对象反序列化为HTML表单?

时间:2016-09-07 15:30:21

标签: javascript html post deserialization json-deserialization

编辑:问题定义中存在一个概念错误和一个技术错误,因此最好关闭此问题而不是清理。当我有时间重新定义问题时,我会再次发布。 请帮助投票结束,因为非特定。

有很多关于将复杂HTML表单序列化到相应JavaScript对象的信息和问题(例如this)。

以下是该流程的示例:具有此表单

<form>
    <input type="text" name="scalar" value="1">
    <input type="text" name="array[0]" value="1">
    <input type="text" name="array[1]" value="2">
    <input type="text" name="array[2]" value="3">
    <input type="text" name="object[subscalar]" value="1">
</form>

从中得到这个javascript对象

{
  "scalar": 1,
  "array": [1, 2, 3],
  "object": {
    "subscalar": 1
  }
}

但我怎么能做反向工作呢?

我们的目标是针对单独的浏览器窗口执行本机POST。我们有一个复杂的JavaScript对象,我们通过AJAX POST发送,所以我们直接使用该对象作为jQuery.ajax数据参数。但是现在我们需要在DOM中创建一个真实的表单,其中包含所有括号语法的输入和值,然后以特定的框架本地提交它。

jQuery用法是可选的。已经存在的方法,库等优于自定义的snuppet。这不是因为无法编码,而是我们不确定是否需要重新发明轮子。

提前致谢。

1 个答案:

答案 0 :(得分:1)

function parseform(elem,parent=""){
    this.html="";
    this.parent=parent;
    if(typeof elem=="Array"){
        var counter=0;
        elem.forEach(function(a){
            this.html+=new parseform(a,this.parent+"["+counter+"]").html;
            counter++;
        });
    }
    if(typeof elem=="String"){
        this.html+="<input name='"this.parent+"["+elem+"]' />";
    }
    //object in progress
    if(typeof elem=="Object"){
        for (var key in elem) { 
            if (p.hasOwnProperty(key)) { 
                this.html += new parseform(elem[key],this.parent="["+key+"]").html;
            }
        }
    }
}

像这样使用:

 code=new parseform(yourjsondecoded).html;

我知道你不想要代码,但我不认为这是一个如此特殊的api