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

【问题标题】：How do I get multiple value input to json object with jquery or javascript如何使用 jquery 或 javascript 将多个值输入到 json 对象
【发布时间】：2018-08-10 08:41:01
【问题描述】：

我有这样的输入标签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。提前致谢

【问题讨论】：

标签： javascript jquery html json stringify

【解决方案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>

【讨论】：

如果 id='A' 更改为 id='12' 会怎样
感谢天使 Politis。但在你的情况下，你检查'id'的长度是正确的。就我而言，无法检查“id”的长度，但这现在可以帮助我，非常感谢。我会得到另一个属性来检查父母和孩子。
OP 可以调整检查条件以适应他们的确切情况@yajiv。我的回答可以作为指导。

【解决方案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>

【讨论】：

谢谢@Gerardo BLANCO。您的 Result 也可以使用。

【解决方案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”检查

【讨论】：

感谢@Angel Politis 帮助我。
我很高兴能帮助你@C.Tin！检查nodetype 属性是个好主意（我编辑了我的答案以包含它，因为它比检查length 更好），但一定要更正你的HTML，因为有些@您提供的代码中的 987654325@ 元素改为使用 nodetye。

【解决方案4】：

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

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>

【讨论】：

【解决方案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">

【讨论】：

【解决方案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>

【讨论】：