如何转换以JSON格式表示的字符串数组并将其转换为使用JQuery的HTML项目符号列表?使用JQuery将JSON数组转换为HTML项目符号列表
回答
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来说,你可以使用$.getJSON()
功能的服务器获取的JSON。
如果你的JSON字符串在stringArr:
$.each(stringArr, function(idx, val) {
$('<li></li>').html(val);
}
什么的这些行当中应该这样做。
可能是这样的吗?我没有测试过,但它应该可以工作。
ul = $("<ul/>");
$(json_arr).each(function(){
$("<li/>").text(this).appendTo(ul);
});
// add ul to DOM
JSON字符串一样,看起来像:
'["foo","bar","base","ball"]'
可以解析到一个Javascript数组对象通过调用JSON.parse()
,遍历数组,并插入字符串。
var jsonstring = '["foo","bar","base","ball"]',
arr = JSON.parse(jsonstring),
len = arr.length;
while(len--) {
$('<li>', {
text: arr[len]
}).appendTo('ul');
}
<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 -->
我并没有考虑递归。谢谢。 – InbetweenWeekends 2015-06-22 16:23:15
使用jQuery jPut插件。只需创建一个html模板&调用你的json文件。您还可以通过jPut调用Ajax的文件(ajax_url)
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>
'jput'不是一个有效的属性。 – Benio 2017-07-14 09:43:31
@Benio在你的HTML中添加jput.js。 – shabeer 2017-07-15 12:56:15
'jput',如您在示例代码中所示,不是有效的属性。如果你想使用自定义属性,你应该使用[自定义数据属性](https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the- data - * - attributes),比如'data-jput',否则它不是一个有效的HTML代码。 – Benio 2017-07-16 00:13:08
- 1. 将HTML项目符号转换为PlainText
- 2. 将列表项目转换为元组
- 3. 将项目列表转换为项目元组列表
- 4. 使用jQuery将JSON转换为HTML jPut
- 5. 使用javascript/jquery将HTML表格数据转换为JSON
- 6. C#将项目符号点字符转换为HTML无序LIst
- 7. 将HTML符号转换为Java符号
- 8. 将HTML列表转换为JSON
- 9. 将JSON数组转换为html
- 10. Skype将项目编号转换为表情符号
- 11. C#使用newtonsoft将json数组转换为对象列表json.net
- 12. 将数组数组转换为JSON对象列表而不是JSON字符串
- 13. C#将Json数组转换为字符串数组使用Json.Net
- 14. 将json对象转换为jquery数组
- 15. 从JSON数据创建HTML项目符号列表的问题
- 16. 将JSON HTML字符串转换为HTML
- 17. 在Android中使用MySql项目将JSON转换为字符串
- 18. 将字符串转换为json数组
- 19. 如何将项目列表转换为php数组?
- 20. 列中的HTML项目符号列表
- 21. 将列表转换为JSON
- 22. 将数组转换为数组列表?
- 23. 使用速记符号匿名函数将元组转换为列表
- 24. 使用Javascript将嵌套JSON转换为HTML嵌套列表
- 25. 将数组转换为JSON
- 26. 将数组转换为JSON
- 27. 将数组转换为json
- 28. 将html表数据转换为JSON数组对象reactjs
- 29. 将JSON数组显示为html列表
- 30. 使用jQuery遍历HTML表格,将表格中的数据转换为JSON
您可以添加JSON结构的一个例子吗? – wajiw 2010-11-15 22:15:36
http://api.jquery.com/jQuery.getJSON/ – switz 2010-11-15 22:19:59
@Switz,getJSON是我将如何获取数据 - 不清楚如何将其中一个数组转换为列表 – 2010-11-15 22:20:55