使用jQuery将JSON数组转换为HTML项目符号列表

如何转换JSON格式的字符串数组，并使用jQuery将其转换为HTML项目符号列表？

如果JSON字符串为stringArr格式：

$.each(stringArr, function(idx, val) {
   $('<li></li>').html(val);
}

$。每个（stringArr，函数（idx，val）{
$（“
”）.html（val）；
}

---

或者这些行中的某个行应该可以做到这一点。

可能是这样的吧？我还没有测试过，但应该可以

ul = $("<ul/>");
$(json_arr).each(function(){
    $("<li/>").text(this).appendTo(ul);
});

// add ul to DOM

ul=$（“
”）；
$（json_arr）.each（function（）{
$（“
”）.text（this）.appendTo（ul）；
});
//将ul添加到DOM

类似的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');
}

var jsonstring='[“foo”，“bar”，“base”，“ball”]，
arr=JSON.parse（jsonstring），
len=arr.长度；
而(len--){
$（“
”，{
文本：arr[len]
}).附录（“ul”）；
}
var ul=$（“
”）.appendTo（'body'）；
var json={items:['item 1'，'item 2'，'item 3']}；
$（json.items）。每个（函数（索引，项）{
附加(
$（document.createElement（'li'））.text（项）
);
});

至于使用AJAX从服务器获取JSON，您可以使用该函数

.

//这是我使用的代码。你应该能够根据自己的需要调整它。
函数过程测试json（）{
var jsondataar={“Errors”：[]，“Success”：true，“Data”：{“step0”：{“collectionNameStr”：“ideas\u org\u Private”，“url\u root”：“http:\/\/192.168.1.128:8500\/ideas\u org\/”，“collectionPathStr”：“C:\\ColdFusion8\\wwroot\\ideas\u org\\wwrootchapter0-2\\verity\u collections\”，“writeVerityLastFileNameStr”：“C:\\ColdFusion8\\wwwroot\\ideas\u org\\wwwroot\\chapter0-2\\LastFileName.txt”，“doneFlag”：false，“state\u dbrec”：{}，“errorMsgStr”：“fileroot”：“C:\\ColdFusion8\\wwroot\\ideas\u org\\wwwroot”}；
var htmlStr=“[jsonDataArr]struct is”+递归（jsonDataArr）；
警报（htmlStr）；
$（document.createElement（'div'））.attr（“class”，“main_div”）.html（htmlStr）.appendTo（'div#out'）；
$（$（$div#out”）.text（$（$div#out”）.html（））；
}
函数递归（数据）{
var htmlRetStr=“
”；
for（var输入数据）{
if（typeof（data[key]）==“object”&&data[key]！=null）{
htmlRetStr+=“
”+key+：
”；
htmlRetStr+=recurse（数据[key]）；
htmlRetStr+='
'；
}否则{
htmlRetStr+=（“
”+key+”：“+data[key]+”
）；
}
};
htmlRetStr+='
'；
返回（htmlRetStr）；
}
运行进程测试json（）
使用jQuery jPut插件。只需创建一个html模板并调用json文件。您也可以通过jPut（ajax\U url）调用ajax文件



$（文档）.ready（函数（）{
var json=[{“name”：“item1”，“link”：“link1”}，{“name”：“item2”，“link”：“link2”}]；
//jPut代码
$（“#菜单”）.jPut({
jsonData:json，
名称：“模板”，
});
});



您能添加一个JSON结构的示例吗？@Switz，getJSON是我获取数据的方式-不清楚如何将一个数组转换为列表。另请看：我以前从未见过JSFIDLE.net。我同意。@grampage，这是一个非常好的网站，允许快速javascript模拟支持流行框架。我没有考虑递归。谢谢。
jput
不是有效的属性。@Benio在HTML中添加jput.js。
jput
，如示例代码所示，不是有效的属性。如果要使用自定义属性，应使用，如
数据jput
，否则它不是有效的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)
    );
});

<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>&quot;' + data[key] + '&quot;</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 -->

<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>