使用 jQuery 将 JSON 数组转换为 HTML 项目符号列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4189365/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Use jQuery to convert JSON array to HTML bulleted list
提问by Marcus Leon
How can you convert an array of strings represented in JSON format and convert this to an HTML bulleted list using jQuery?
如何转换以 JSON 格式表示的字符串数组，并使用 jQuery 将其转换为 HTML 项目符号列表？
回答by Darin Dimitrov
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)
);
});
As far as fetching the JSON from your server using AJAX is concerned you could use the $.getJSON()function.
就使用 AJAX 从您的服务器获取 JSON 而言，您可以使用该$.getJSON()函数。
现场演示。
回答by user579338
<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 -->
回答by jAndy
A JSON string like that would look like:
像这样的 JSON 字符串看起来像：
'["foo","bar","base","ball"]'
You can parse that into an Javascript array object by calling JSON.parse(), iterate over that array and insert the strings.
您可以通过调用JSON.parse()将其解析为 Javascript 数组对象，遍历该数组并插入字符串。
var jsonstring = '["foo","bar","base","ball"]',
arr = JSON.parse(jsonstring),
len = arr.length;
while(len--) {
$('<li>', {
text: arr[len]
}).appendTo('ul');
}
回答by shabeer
Use jQuery jPut plugin. Just create a html template & call your json file. you can also call the ajax file through jPut (ajax_url)
使用 jQuery jPut 插件。只需创建一个 html 模板并调用您的 json 文件。也可以通过jPut(ajax_url)调用ajax文件
http://plugins.jquery.com/jput/
http://plugins.jquery.com/jput/
<script>
$(document).ready(function(){
var json = [{"name": "item1","link":"link1"},{"name": "item2","link":"link2"}];
//jPut code
$("#menu").jPut({
jsonData:json,
name:"template",
});
});
</script>
<body>
<!-- jput template, the li that you want to append to ul-->
<div jput="template">
<li><a href="http://yourdomain.com/{{link}}">{{name}}</a></li>
</div>
<!-- your main ul -->
<ul id="menu">
</ul>
</body>
回答by charisis
If your json strings are in stringArr:
如果您的 json 字符串在 stringArr 中：
$.each(stringArr, function(idx, val) {
$('<li></li>').html(val);
}
or something among these lines should do it.
或这些行中的某些内容应该这样做。
回答by Mike Park
Something like this maybe? I haven't tested it, but it should work.
也许像这样的东西？我还没有测试过，但它应该可以工作。
ul = $("<ul/>");
$(json_arr).each(function(){
$("<li/>").text(this).appendTo(ul);
});
// add ul to DOM
