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

问题描述 投票：-1回答：6

我有像这样的输入标签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
6个回答
0
投票

您遇到的问题发生了，因为您没有编写区分'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>
0
投票

对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>
0
投票

试试这个 ：

   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”检查

0
投票

您可以使用nodetype parent找到所有输入并更新obj对象，其中id为关键，{}为值。然后使用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>
0
投票

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">
0
投票

像这样写可能有效：

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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.