使用jQuery将JSON数组转换为HTML项目符号列表
使用jQuery将JSON数组转换为HTML项目符号列表
提问于 2010-11-16 06:13:31
如何转换以JSON格式表示的字符串数组，并使用jQuery将其转换为HTML项目符号列表？
回答 6
Stack Overflow用户
回答已采纳
发布于 2010-11-16 06:23:11
var ul = $('<ul>').appendTo('body');
var json = { items: ['item 1', 'item 2', 'item 3'] };
$(json.items).each(function(index, item) {
ul.append(
$(document.createElement('li')).text(item)
);
});就使用AJAX从服务器获取JSON而言，您可以使用$.getJSON()函数。
Stack Overflow用户
发布于 2011-06-08 08:17:11
<script language="JavaScript" type="text/javascript">
// Here is the code I use. You should be able to adapt it to your needs.
function process_test_json() {
var jsonDataArr = { "Errors":[],"Success":true,"Data":{"step0":{"collectionNameStr":"ideas_org_Private","url_root":"http:\/\/192.168.1.128:8500\/ideas_org\/","collectionPathStr":"C:\\ColdFusion8\\wwwroot\\ideas_org\\wwwrootchapter0-2\\verity_collections\\","writeVerityLastFileNameStr":"C:\\ColdFusion8\\wwwroot\\ideas_org\\wwwroot\\chapter0-2\\LastFileName.txt","doneFlag":false,"state_dbrec":{},"errorMsgStr":"","fileroot":"C:\\ColdFusion8\\wwwroot\\ideas_org\\wwwroot"}}};
var htmlStr= "<h3 class='recurse_title'>[jsonDataArr] struct is</h3> " + recurse( jsonDataArr );
alert( htmlStr );
$( document.createElement('div') ).attr( "class", "main_div").html( htmlStr ).appendTo('div#out');
$("div#outAsHtml").text( $("div#out").html() );
}
function recurse( data ) {
var htmlRetStr = "<ul class='recurseObj' >";
for (var key in data) {
if (typeof(data[key])== 'object' && data[key] != null) {
htmlRetStr += "<li class='keyObj' ><strong>" + key + ":</strong><ul class='recurseSubObj' >";
htmlRetStr += recurse( data[key] );
htmlRetStr += '</ul ></li >';
} else {
htmlRetStr += ("<li class='keyStr' ><strong>" + key + ': </strong>"' + data[key] + '"</li >' );
}
};
htmlRetStr += '</ul >';
return( htmlRetStr );
}
</script>
</head><body>
<button onclick="process_test_json()" >Run process_test_json()</button>
<div id="out"></div>
<div id="outAsHtml"></div>
</body>
<!-- QUESTION: Maybe some one with more jquery experience
could convert this to a shorter / pure jquery method -->Stack Overflow用户
发布于 2010-11-16 06:22:14
这样的JSON字符串将如下所示：
'["foo","bar","base","ball"]'您可以通过调用JSON.parse()将其解析为Javascript数组对象，迭代该数组并插入字符串。
var jsonstring = '["foo","bar","base","ball"]',
arr = JSON.parse(jsonstring),
len = arr.length;
while(len--) {
$('<li>', {
text: arr[len]
}).appendTo('ul');
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4189365
复制相关文章
相似问题