如何使用 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>