Question

如何将表单的某些元素转换为JSON？

我希望JSON数据不是基于"name": "value"，而是基于"value1": "value2"。

其中“value1”是输入元素1，“value2”是输入元素2.

如果我想在以前的JSON数据中添加一个对象怎么办？例如，

dataBefore = {"key": "1"}; 

dataAfter = {"key": "1", "data": "2"};

我尝试过代码，

var person = {};
var key = $('#com-key2').val();
person[key] = $('#com-value2').val();

这样的UI， form example

注意：所有输入元素的ID都相同

怎么做？对不起，如果语言难以理解

Answer 1

我不确定你对第一部分的意思，但是要添加一个对象：

dataBefore = {"key": "1"};

dataBefore["data"] = "2"

dataBefore = {"key": "1", "data": "2"};

编辑：这可能就是你要找的东西

var obj = {};
var key = document.getElementById('myInput').value;
var text = document.getElementById('myOtherInput').value;
obj[key] = text;

Answer 2

我不确定这是否是您问题的答案。

如果有问题，请告诉我。

var obj = {"key1":"value1","key2":"value2","key3":"value4"};
var index = 0;
for(var key in obj){
    $('.key').eq(index).val("new_"+key);
    $('.value').eq(index).val("new_"+obj[key]);
    index++;
}

$('.container').each(function(){
  var key = $(this).find('.key').first().val();
  var value = $(this).find('.value').first().val();
  obj[key] = value;
})

console.log(obj);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<input class="key" name="key1"/>
<input class="value" name="value1"/>
</div>
<div class="container">
<input class="key" name="key2"/>
<input class="value" name="value2"/>
</div>
<div class="container">
<input class="key" name="key3"/>
<input class="value" name="value3"/>
</div>

Answer 3

首先，您不需要jQuery将两个对象合并为一个。

其次，重新阅读您的问题：拥有重复的元素ID属性 NOT VALID HTML 。如果您希望使用specificity one selector一次性获取所有内容，请执行<input ... class="form__input" />并将其用作jQuery选择器var $inputs = $(".form__input");

Object.assign将合并两个对象，并且可以在大多数浏览器中使用（MSIE需要一个垫片）

var a = { a: 1 }, b = { b: 2 }, c;

c = Object.assign( {}, a, b );

console.log( JSON.stringify( c ) );

// { "a": 1, "b": 2 }

使用JQUERY将表单数据转换为JSON

3 个答案: