jQuery JSON 编码一组输入值

jQuery JSON encode set of input values

提问by gurun8

I need tp serialize a group of input elements but I can't for the life of me figure out this simple task.

我需要 tp 序列化一组输入元素，但我终生无法弄清楚这个简单的任务。

I can successfully iterate through the targeted inputs using:

我可以使用以下方法成功迭代目标输入：

$("#tr_Features :input").each(function() {
    ...
}

Here's my code, that doesn't work:

这是我的代码，它不起作用：

var features = "";
$("#tr_Features :input").each(function() {
    features += {$(this).attr("name"): $(this).val()};
}

Serializing the entire form won't give me what I need. The form has much more than this subset of inputs. This seems like it should be a pretty straightforward task but apparently programming late into a Friday afternoon isn't a good thing.

序列化整个表单不会给我我需要的东西。表单的输入内容远不止这个子集。这似乎应该是一项非常简单的任务，但显然在周五下午编程并不是一件好事。

If it's helpful, here's the form inputs I'm targeting:

如果有帮助，这里是我针对的表单输入：

<table cellspacing="0" border="0" id="TblGrid_list" class="EditTable" cellpading="0">
<tbody><tr class="FormData" rowpos="1">
    <td class="CaptionTD ui-widget-content">Cable Family</td>
    <td class="DataTD ui-widget-content" style="white-space: pre;">&nbsp;<input type="text" value="" id="feature_id:8" name="feature_id:8"></td>
</tr>
<tr class="FormData" rowpos="1">
    <td class="CaptionTD ui-widget-content">Material</td>
    <td class="DataTD ui-widget-content" style="white-space: pre;">&nbsp;<input type="text" value="" id="feature_id:9" name="feature_id:9"></td>
</tr>
<tr class="FormData" rowpos="1">
    <td class="CaptionTD ui-widget-content">Thread Size</td>
    <td class="DataTD ui-widget-content" style="white-space: pre;">&nbsp;<input type="text" value="" id="feature_id:10" name="feature_id:10"></td>
</tr>
<tr class="FormData" rowpos="1">
    <td class="CaptionTD ui-widget-content">Attachment Style</td>
    <td class="DataTD ui-widget-content" style="white-space: pre;">&nbsp;<input type="text" value="" id="feature_id:11" name="feature_id:11"></td>
</tr>
<tr class="FormData" rowpos="1">
    <td class="CaptionTD ui-widget-content">Feature</td>
    <td class="DataTD ui-widget-content" style="white-space: pre;">&nbsp;<input type="text" value="" id="feature_id:12" name="feature_id:12"></td>
</tr>
<tr class="FormData" rowpos="1">
    <td class="CaptionTD ui-widget-content">Comments</td>
    <td class="DataTD ui-widget-content" style="white-space: pre;">&nbsp;<input type="text" value="" id="feature_id:13" name="feature_id:13"></td>
</tr>

回答by user113716

EDIT:

编辑：

If I'm understanding your question correctly, this will give you the json object you want.

如果我正确理解您的问题，这将为您提供所需的 json 对象。

Note that it requires the json2 library.

请注意，它需要 json2 库。

var features = {};    // Create empty javascript object

$("#tr_Features :input").each(function() {           // Iterate over inputs
    features[$(this).attr('name')] = $(this).val();  // Add each to features object
});

var json = JSON.stringify(features); // Stringify to create json object (requires json2 library)

Thanks to R0MANARMY for pointing out the intended json format in the question.

感谢 R0MANARMY 指出问题中预期的 json 格式。

---

---

Is there a reason you don't use jQuery's .serializeArray()function? You can run it on a subset of elements instead of the entire form.

你有什么理由不使用 jQuery 的.serializeArray()功能吗？您可以在元素的子集而不是整个表单上运行它。

$("#tr_Features :input").serializeArray();

From the docs: http://api.jquery.com/serializeArray/

来自文档：http: //api.jquery.com/serializeArray/

The .serializeArray() method creates a JavaScript array of objects, ready to be encoded as a JSON string.

.serializeArray() 方法创建一个 JavaScript 对象数组，准备好编码为 JSON 字符串。

The .serializeArray() method can act on a jQuery object that has selected individual form elements, such as <input>, <textarea>, and <select>.

所述.serializeArray（）方法可作用已选定的个别形式的元件，诸如jQuery对象上<input>，<textarea>和<select>。

回答by gurun8

Apparently all I was creating was an object the long and hard way. That sounded worse than it should have but it's true. All I needed to do was use the name attribute at the index/key and the val() as the value.

显然，我所创造的只是一个漫长而艰难的对象。这听起来比它应该有的更糟，但这是真的。我需要做的就是使用索引/键的 name 属性和 val() 作为值。

var data = new Object();
$("#tr_Features :input").each(function() {
    data[$(this).attr("name")] = $(this).val();
});
return data;

This worked. Who knew?! Simple really. Y'all got an up arrow from me for lending a hand and going on this escalate I call Friday. Cheers!

这奏效了。谁知道？！真的很简单。你们都从我这里得到了一个向上箭头，因为我伸出援手并继续我周五称之为的升级。干杯!

回答by Jason

you're trying to +=an array... try using features.pushor use the index from the $.eachfunction: features[i] = someval

您正在尝试+=使用数组...尝试使用features.push或使用$.each函数中的索引：features[i] = someval

EDIT

编辑

I noticed that you have the same id for all your trs (and some of your tds!). That may be causing some problems as well. Make sure all your ids are unique.

我注意到你的所有trs（和一些tds！）都有相同的 id 。这也可能会导致一些问题。确保您的所有 ID 都是唯一的。

回答by Joey Adams

+=doesn't add objects to arrays in JavaScript. What you want is .push():

+=不会在 JavaScript 中向数组添加对象。你想要的是.push()：

var features = new Array();
$("#tr_Features :input").each(function(){
    features.push({$(this).attr("name"): $(this).val()});
});

But wait, there's more! jQuery doesn't support converting an object to a JSON string as far as I know (it supports parsing JSON, though). You need to use a separate JSON library for that, such as this one.

但是等等，还有更多！据我所知，jQuery 不支持将对象转换为 JSON 字符串（不过它支持解析 JSON）。您需要为此使用一个单独的 JSON 库，例如this one。