jQuery遍历JSON字典
jQuery遍历JSON字典
提问于 2013-01-08 22:17:09
对于这个JSON字典，
{
"user":null,
"currency":"EUR",
"balance":0,
"tranlist": [
{ "date":"323","address":"a"},
{ "date":"121","address":"s"},
]
}当我使用此函数时，我在获取事务列表时遇到问题
$(document.body).append($(
'<table>' + $.map(data, function(value,key){
return '<tr><td>'+key+'</td><td>'+value+'</td></tr>'
}).join('')+'</table>'
));下面是输出：
currency EUR
balance 0
transactions [object Object],[object Object],[object Object],[object Object]我如何修复我的代码？
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-01-08 22:19:58
您显示的代码(that I wrote in a previous answer)旨在快速预览您的结构，并作为对象浏览的示例。
现在，您必须针对您的问题编写一些更具体的代码。例如：
$(document.body).append($(
'<table>' + $.map(data, function(value,key){
console.log(value);
return '<tr><td>'+key+'</td><td>'
+ ((value && $.isArray(value))
? value.map(function(v){return v.date+':'+v.address}).join(', ')
: value
)+ '</td></tr>'
}).join('')+'</table>'
));Demonstration
您也可以设计一个通用的、递归的toString函数，但是除了调试之外( console.log对此更好)，没有太多意义。
Stack Overflow用户
发布于 2013-01-08 22:20:00
$(document.body).append(
$('<table>').append(
$.map(data, function (value, key) {
return $('<tr>').append( $('<td>', {text: key}) )
.append( $('<td>', {text: value}) );
})
);
));请注意，不推荐从连接字符串构建HTML。使用标记和数据$('<td>', {text: key})分离来构造元素是最干净的解决方案。
Stack Overflow用户
发布于 2013-01-08 22:39:23
不能完全回答你的问题，但我建议使用Pure JavaScript Template Engine (jQuery插件)，而不是自己构建超文本标记语言。
该引擎(一个jQuery插件)非常轻便，对于您所做的工作类型(特别是在子元素上迭代)非常适合。
我建议您花几分钟逐字浏览Get Started页面和几个tutorials，解释对子元素的迭代。
示例使用PURE
HTML代码：
<div id="sample">
<div class="currency">EUR</div>
<div class="balance">0</div>
<table>
<tr class="date">
<td>date</td><td class="value"></td>
</tr>
<tr class="address">
<td>address</td><td class="value"></td>
</tr>
</table>
<div>JavaScript代码(请注意，最后一条语句中使用的data变量与您问题中的变量相同)
//declaration of the actions PURE has to do
var directive = {
'.currency': 'currency',
'.balance': 'balance',
'table': {
'trans<-tranlist': {
'tr.date .value': 'trans.date',
'tr.address .value': 'trans.address'
}
}
};
// note the use of render instead of autoRender
$('#sample').render(data, directive);Output HTML将如下所示：
<div id="sample">
<div class="currency"></div>
<div class="balance"></div>
<table>
<tr class="date">
<td>date</td><td class="value">323</td>
</tr>
<tr class="address">
<td>address</td><td class="value">a</td>
</tr>
<tr class="date">
<td>date</td><td class="value">121</td>
</tr>
<tr class="address">
<td>address</td><td class="value">s</td>
</tr>
</table>
<div>当然，您还可以做更多的事情，比如从JSON对象设置类属性，或者过滤项目等。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14216887
复制相关文章
相似问题
腾讯云开发者
