如何使用 jquery 或 javascript 将多个值输入到 json 对象

Question

我有这样的输入标签html：

<form id="info">
    <input id="A" name="A" type="hidden" nodetye="parent" value="A">
    <input id="A1" name="A1" type="text" nodetype="child" value="a1val">
    <input id="A2" name="A2" type="text" nodetype="child" value="a2val">
    <input id="B" name="B" type="hidden" nodetye="parent" value="B">
    <input id="B1" name="B1" type="text" nodetye="child" value="B1">
    <input id="B2" name="B2" type="text" nodetye="child" value="B2">
<form>

我在 jquery 中传递值是这样的：

function writeJSONfile() {
    var obj = {};
    $("form#info :input").each(function(){
        obj[this.id] = $(this).val();
    });
    var json = JSON.stringify(obj);
    alert("check"+json);
}

结果 ：

{"A":"A","A1":"a1val","A2":"a2val","B":"B","B1":"b1val","B2":"b2val"}

但我的预期结果是：

{"A":{"A1":"a1val","A2":"a2val"},"B":{"B1":"b1val","B2":"b2val"}}

您可以使用 json 编辑器在线阅读 JSON。 提前致谢

Answer 1

您面临的问题发生了，因为您没有编写代码来区分'A' 、 'B'和'A1' 、 'B1'等值。为了使代码工作，您只需要：

• 引用属性应添加到 & 的对象的变量
• 一个简单的if检查将相应地引导流程。

片段：

 /* ----- JavaScript ----- */ function writeJSONfile() { var /* Create an object. */ obj = {}, /* Create a variable that references the current object (default → obj). */ ref = obj; /* Iterate over every input. */ $("form#info :input").each(function() { /* Cache the id of the input. */ var id = this.id; /* Check whether the nodetype attribute is set to 'parent'. */ if (this.getAttribute("nodetype") == "parent") { /* Set a new object to the property and set ref to refer to it. */ ref = obj[id] = {}; } else { /* Set the value of the input to the referred object. */ ref[id] = $(this).val(); } }); /* Stringify the object and return it. */ return JSON.stringify(obj); } /* Create and log the result. */ console.log(writeJSONfile());

 <!----- HTML -----> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="info"> <input id="A" name="A" type="hidden" nodetype="parent" value="A"/> <input id="A1" name="A1" type="text" nodetype="child" value="a1val"/> <input id="A2" name="A2" type="text" nodetype="child" value="a2val"/> <input id="B" name="B" type="hidden" nodetype="parent" value="B"/> <input id="B1" name="B1" type="text" nodetype="child" value="b1val"/> <input id="B2" name="B2" type="text" nodetype="child" value="b2val"/> </form>

Answer 2

对classes和ids的管理做了一些更改。 一个快速简单的功能来解决您的问题。

希望这就是你要找的。 如果需要，很乐意解释或帮助提供更好的解决方案。

 function writeJSONfile() { var obj = {}; $(".main").each(function() { var mainId = this.id; obj[this.id] = {}; $("input").each(function() { if ($(this).hasClass(mainId)) { obj[mainId][this.id] = $(this).val();; } }) }); var json = JSON.stringify(obj); alert("check" + json); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="info"> <input id="A" class="main" name="A" type="hidden" nodetye="parent" value="A"> <input id="A1" class="A" name="A1" type="text" nodetype="child" value="a1val"> <input id="A2" class="A" name="A2" type="text" nodetype="child" value="a2val"> <input id="B" class="main" name="B" type="hidden" nodetye="parent" value="B"> <input id="B1" class="B" name="B1" type="text" nodetye="child" value="B1"> <input id="B2" class="B" name="B2" type="text" nodetye="child" value="B2"> <form> <button onclick="writeJSONfile()">Run</button>

Answer 3

尝试这个 ：

   function writeNodeJSON() {
       var obj = {};
       var ref = obj;
       $("form#info :input").each(function () {
           var id = this.id;
           if ($(this).attr("nodetype")==="parent") {
               obj[id] = {};
               ref = obj[id];
           } else
               ref[id] = $(this).val();
       });
       console.log(JSON.stringify(obj));
    //    alert(JSON.stringify(obj));
    //    return JSON.stringify(obj);
    }}

我通过属性名称“nodetype”检查

Answer 4

您可以找到nodetype parent所有输入，并使用其id作为键和{}作为值更新obj对象。 然后遍历所有以nodetype为child元素的输入元素，并将所有 id 作为键和值添加为对象中的输入框值。

 function writeJSONfile() { var obj = {}; $('form#info :input[nodetype=parent]').each(function(){ obj[this.id] = {}; }) $("form#info :input[nodetype=child]").each(function(){ if(!(this.id[0] in obj)) obj[this.id[0]] = {}; obj[this.id[0]][this.id] = $(this).val(); }); var json = JSON.stringify(obj); console.log(json); } writeJSONfile();

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="info"> <input id="A" name="A" type="hidden" nodetype="parent" value="A"> <input id="A1" name="A1" type="text" nodetype="child" value="a1val"> <input id="A2" name="A2" type="text" nodetype="child" value="a2val"> <input id="B" name="B" type="hidden" nodetype="parent" value="B"> <input id="B1" name="B1" type="text" nodetype="child" value="B1"> <input id="B2" name="B2" type="text" nodetype="child" value="B2"> <form>

Answer 5

 function writeJSONfile() { var obj = {}; $(".main").each(function() { var mainId = this.id; obj[mainId] = {}; $("."+mainId).each(function() { obj[mainId][this.id] = $(this).val(); }) }); console.log(JSON.stringify(obj)); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="info"> <input id="A" class="main" name="A" type="hidden" nodetye="parent" value="A"> <input id="A1" class="A" name="A1" type="text" nodetype="child" value="a1val"> <input id="A2" class="A" name="A2" type="text" nodetype="child" value="a2val"> <input id="B" class="main" name="B" type="hidden" nodetye="parent" value="B"> <input id="B1" class="B" name="B1" type="text" nodetye="child" value="B1"> <input id="B2" class="B" name="B2" type="text" nodetye="child" value="B2"> <form> <input type="button" onclick="writeJSONfile()" value="Run">

Answer 6

像这样写可能有效：

 function writeJSONfile() { debugger; var obj = {}; var children = {}; $("form#info :input").each(function(){ var parent = this; if(parent.getAttribute("nodetype")=="parent"){ obj[parent.id] = {}; var nexts = $(parent).nextAll(); for(let i=0;i<nexts.length;i++){ if(nexts[i].getAttribute("nodetype")!="child"){ break; }else{ obj[parent.id][nexts[i].id] = $(nexts[i]).val(); } } } }); var json = JSON.stringify(obj); alert("check"+json); } writeJSONfile();

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="info"> <input id="A" name="A" type="hidden" nodetype="parent" value="A"> <input id="A1" name="A1" type="text" nodetype="child" value="a1val"> <input id="A2" name="A2" type="text" nodetype="child" value="a2val"> <input id="B" name="B" type="hidden" nodetype="parent" value="B"> <input id="B1" name="B1" type="text" nodetype="child" value="B1"> <input id="B2" name="B2" type="text" nodetype="child" value="B2"> <form>