如何使用 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的input元素，并在对象中添加所有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>

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>

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

How do I get multiple value input to json object with jquery or javascript

html

javascript

jquery

json

stringify