关键词:
【中文标题】如何将表行序列化为 json 对象【英文标题】:How to serialize table row to json object 【发布时间】:2017-03-07 13:41:34 【问题描述】:如何将表格序列化为json数组,使每个数组元素都包含代表一个表格行的json对象:
[
name: "variable1", valuetostore: "a-b", totaltype: "Lowest" ,
name: "variable2", valuetostore: "c-d", totaltype: "Highest"
]
我尝试了下面的代码,但这会产生具有名称和值属性的对象,并且数组中的成员比表行中的成员多。
它还序列化隐藏的第一行。它是用于添加行的模板行,不应出现在结果中。
$(function()
$("#btnShow").on("click", function()
console.log($("#myForm").serializeArray());
);
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="modal" id="reportVariables" tabindex="-1" role="dialog" aria-labelledby="reportVariablesLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<form id="myForm">
<table class="table table-condensed table-striped" id="reportVariablesTable">
<thead>
<tr>
<th>Name</th>
<th>Value</th>
<th>Calculate</th>
</tr>
</thead>
<tbody>
<!-- table contains one hidden rows which should not -->
<tr style='display:none'>
<td>
<input type="text" name="name">
</td>
<td>
<textarea name="valuetostore"></textarea>
</td>
<td>
<select class="totaltype-select" id="totaltype" name="totaltype">
<option value=""></option>
<option value="Sum">Summary</option>
<option value="Lowest">Smallest</option>
<option value="Highest">Biggers</option>
</select>
</td>
</tr>
<!-- other are data rows which should sent -->
<tr>
<td>
<input type="text" name="name" value="variable1">
</td>
<td>
<textarea name="valuetostore">a-b</textarea>
</td>
<td>
<select class="totaltype-select" id="totaltype" name="totaltype">
<option value=""></option>
<option value="Sum">Summary</option>
<option value="Lowest" selected>Smallest</option>
<option value="Highest">Biggers</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="text" name="name" value="variable2">
</td>
<td>
<textarea name="valuetostore">c-d</textarea>
</td>
<td>
<select class="totaltype-select" id="totaltype" name="totaltype">
<option value=""></option>
<option value="Sum">Summary</option>
<option value="Lowest" >Smallest</option>
<option value="Highest" selected>Biggers</option>
</select>
</td>
</tr>
</tbody>
</table>
<button id="btnShow" type="button">
Show
</button>
</form>
</div>
</div>
</div>
</div>
【问题讨论】:
我想这会解决你的问题***.com/questions/2240005/… 这个问题的答案没有显示从输入、文本区域和选择 tr 中的元素中获取 valeus。我询问了在结果 json 对象属性中返回它们的值 【参考方案1】:您可以使用nth-child
选择器和n+2
来仅选择tr>=2:
#myForm tbody tr:nth-child(n+2)
但是,结果不会是一个对象数组,其中每个对象都是一行的对象。结果将是一个对象数组,其中每个选择/输入/文本区域本身就是一个对象。
您可以使用trs
上的each()
函数来遍历所有这些以获得预期的结果。
以下是两个选项的示例:
$(function()
$("#btnShow1").on("click", function()
console.log($("#myForm tbody tr:nth-child(n+2) textarea,#myForm tbody tr:nth-child(n+2) input,#myForm tbody tr:nth-child(n+2) select").serializeArray());
);
$("#btnShow2").on("click", function()
var ar = [];
$("#myForm tbody tr:nth-child(n+2)").each(function()
rowData = $(this).find('input, select, textarea').serializeArray();
var rowAr = ;
$.each(rowData, function(e, v)
rowAr[v['name']] = v['value'];
);
ar.push(rowAr);
);
console.log(ar)
);
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="modal" id="reportVariables" tabindex="-1" role="dialog" aria-labelledby="reportVariablesLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<form id="myForm">
<table class="table table-condensed table-striped" id="reportVariablesTable">
<thead>
<tr>
<th>Name</th>
<th>Value</th>
<th>Calculate</th>
</tr>
</thead>
<tbody>
<!-- table contains one hidden rows which should not -->
<tr style='display:none'>
<td>
<input type="text" name="name">
</td>
<td>
<textarea name="valuetostore"></textarea>
</td>
<td>
<select class="totaltype-select" id="totaltype" name="totaltype">
<option value=""></option>
<option value="Sum">Summary</option>
<option value="Lowest">Smallest</option>
<option value="Highest">Biggers</option>
</select>
</td>
</tr>
<!-- other are data rows which should sent -->
<tr>
<td>
<input type="text" name="name" value="variable1">
</td>
<td>
<textarea name="valuetostore">a-b</textarea>
</td>
<td>
<select class="totaltype-select" id="totaltype" name="totaltype">
<option value=""></option>
<option value="Sum">Summary</option>
<option value="Lowest" selected>Smallest</option>
<option value="Highest">Biggers</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="text" name="name" value="variable2">
</td>
<td>
<textarea name="valuetostore">c-d</textarea>
</td>
<td>
<select class="totaltype-select" id="totaltype" name="totaltype">
<option value=""></option>
<option value="Sum">Summary</option>
<option value="Lowest" >Smallest</option>
<option value="Highest" selected>Biggers</option>
</select>
</td>
</tr>
</tbody>
</table>
<button id="btnShow1" type="button">
Options #1
</button><br />
<button id="btnShow2" type="button">
Options #2
</button>
</form>
</div>
</div>
</div>
</div>
【讨论】:
两个选项都返回具有名称和值属性的对象。如何获取具有 name、valuetostore、totaltype 属性的对象?【参考方案2】:您可以使用 SerializeFromTable jQuery 插件序列化任何带有或不带有表单元素的表格。无需用<form>
标签包装表格。它很简单(其中 data-columnTitle 是您想要的 json/json 数组对象中的关键字段):
let tabledata = $("#example1").serializeFromTable(
columnNameBy:"data-columnTitle"
);
有关更多选项,请查看此链接:serializeFromTable Plugin。
【讨论】:
如何将属性序列化为 json 对象?
】如何将属性序列化为json对象?【英文标题】:HowcanIserializepropertiesasjsonobject?【发布时间】:2019-03-2108:44:49【问题描述】:如何使用jackson序列化以下通用响应?publicclassGenericResponseprivateStringresource;privateIntegerstatus;privateErrorInfores... 查看详情
如何在 Ruby 中将对象序列化为 json
】如何在Ruby中将对象序列化为json【英文标题】:HowtoSerializeObjecttojsoninRuby【发布时间】:2013-03-0513:03:30【问题描述】:我正在学习Ruby,想知道如何将ruby对象序列化为json。我很喜欢使用ActiveSupport或任何其他gem,最好的方法... 查看详情
如何使用 Json.NET 将 XML 序列化为 JSON 对象
】如何使用Json.NET将XML序列化为JSON对象【英文标题】:HowtoSerializeXMLtoaJSONobjectwithJson.NET【发布时间】:2011-10-1506:11:59【问题描述】:我可以像这样将XML序列化为JSON字符串:varxml=newXmlDocument();xml.LoadXml("<person><name>John</na... 查看详情
如何将大型 JSON 对象直接序列化为 HttpResponseMessage 流?
】如何将大型JSON对象直接序列化为HttpResponseMessage流?【英文标题】:HowtoserializealargeJSONobjectdirectlytoHttpResponseMessagestream?【发布时间】:2016-09-0618:28:04【问题描述】:有没有办法将大型JSON对象直接流式传输到HttpResponseMessage流?... 查看详情
如何将对象的json数组反序列化为字典[重复]
】如何将对象的json数组反序列化为字典[重复]【英文标题】:Howtodeserializethejsonarrayofobjectstodictionary[duplicate]【发布时间】:2012-01-2123:42:23【问题描述】:我有一个Json字符串"[\'SymptID\':\'"+MidID+"\',\'ALvl\':\'"+JawLvl+"\',\'SymptID\':\'"+BckID+... 查看详情
如何将java对象序列化/反序列化为javax.json
从Java7开始,就有了JSON标准。是否有一个简单或标准的解决方案,用于将Java对象序列化为JSON并再次返回?答案你可以试试Gson。它非常简单易用。另一答案您可以使用jaxb注释。 查看详情
Newton JSON 如何将对象序列化为空括号?
】NewtonJSON如何将对象序列化为空括号?【英文标题】:NewtonJSONHowtoserializeobjecttoemptybrackets?【发布时间】:2021-11-1622:03:42【问题描述】:我有一个通用的对象类publicclassMyClass[Required]publicstringTitleget;set;[Required]publicintOrderIndexget;set;... 查看详情
轻松将对象序列化为 JSON
...eanobjecttoJSON【发布时间】:2015-01-1913:31:12【问题描述】:如何将Swift对象序列化为JSON,例如以下对象:classOrdervarid:Intvartitle:Stringvaremail:Stringinit(id:Int,title:String,email:String)self.id=idself.title=titl 查看详情
如何使用 Flask 将复杂对象序列化为 JSON [重复]
】如何使用Flask将复杂对象序列化为JSON[重复]【英文标题】:HowtoserializecomplexobjectstoJSONwithFlask[duplicate]【发布时间】:2018-07-0816:53:19【问题描述】:我是Flask的新手,在尝试返回包含另一个对象实例作为字段的对象时遇到了一些... 查看详情
如何将具有嵌套属性的 JSON 对象反序列化为 Symfony 实体?
】如何将具有嵌套属性的JSON对象反序列化为Symfony实体?【英文标题】:HowdoIdeserializeaJSONobject-whichhasanestedproperty-toaSymfonyentity?【发布时间】:2021-09-2123:14:45【问题描述】:我正在将JSON反序列化为一个php类(一个Symfony实体),它... 查看详情
如何使用 Jackson 将原始 JSON 反序列化为 Java 对象
】如何使用Jackson将原始JSON反序列化为Java对象【英文标题】:HowtodeserializerawJSONtoJavaobjectwithJackson【发布时间】:2021-05-2004:16:25【问题描述】:我有两个POJO:@lombok.ValuepublicclassFooStringfoo;Barbar;@lombok.ValuepublicclassBarStringbar;Stringbaz;我... 查看详情
将对象序列化为 JSON
...ganobjecttoJSON【发布时间】:2010-10-0804:40:50【问题描述】:如何在JavaScript中?【问题讨论】:【参考方案1】:您正在寻找JSON.stringify()。【讨论】:将JSON.stringify()与包含数组的javascript对象一起使用有一点好处。请检查我的问题:*... 查看详情
将 JSON 反序列化为现有对象 (Java)
...va)【发布时间】:2012-09-1304:09:20【问题描述】:我想知道如何让JacksonJSON库将JSON反序列化为现有对象?我试图找到如何做到这一点;但它似乎只能接受一个类并自己实例化它。或者如果不可能,我想知道是否有任何JavaJSON反序列... 查看详情
如何将 django/python 中的模型对象列表序列化为 JSON
】如何将django/python中的模型对象列表序列化为JSON【英文标题】:HowtoserializetoJSONalistofmodelobjectsindjango/python【发布时间】:2012-10-1310:06:44【问题描述】:我正在尝试序列化定义为的模型对象列表:classAnalysisInput(models.Model):input_user... 查看详情
如何在Objective C中将对象序列化为JSON? [复制]
】如何在ObjectiveC中将对象序列化为JSON?[复制]【英文标题】:HowtoSerializeObjectintoJSONinObjectiveC?[duplicate]【发布时间】:2013-11-0901:36:03【问题描述】:我有一个类如下Class1*obj=[[Class1alloc]init];obj.id=1;obj.Name=@"aaa";obj.Marks=100;我将其添加... 查看详情
如何覆盖属性的 JSON 序列化,将值序列化为字符串而不是对象?
】如何覆盖属性的JSON序列化,将值序列化为字符串而不是对象?【英文标题】:HowcanIoverridetheJSONserializationforaproperty,toserializethevalueasastringinsteadofanobject?【发布时间】:2021-03-0412:41:26【问题描述】:使用.Net4.8,我的所有实体框架... 查看详情
REST:如何以“浅”的方式将 java 对象序列化为 JSON?
】REST:如何以“浅”的方式将java对象序列化为JSON?【英文标题】:REST:howtoserializeajavaobjecttoJSONina"shallow"way?【发布时间】:2016-12-0200:58:00【问题描述】:假设我有以下JPA实体:@EntitypublicclassInner@IdprivateLongid;privateStringname;... 查看详情
built_value 如何将 json 数组反序列化为对象数组?
】built_value如何将json数组反序列化为对象数组?【英文标题】:Howdoesbuilt_valuedeserializejsonarraytoobjectarray?【发布时间】:2019-01-1405:48:09【问题描述】:在built_value的官方example中展示了如何设置对象的数组成员:abstractclassCollectionsim... 查看详情