blocks|key|875579|text|如果您的json字符串为stringArr格式：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|875580|$.each(stringArr,+function(idx,+val)+{
+++$('<li></li>').html(val);
}|code-block|syntax|javascript|875581|或者这些行中的某个东西应该能做到这一点。|875582|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>If your json strings are in stringArr:</p>

<pre><code>$.each(stringArr, function(idx, val) {
   $('&lt;li&gt;&lt;/li&gt;').html(val);
}
</code></pre>

<p>or something among these lines should do it.</p>


blocks|key|1090261|text|也许是这样的东西？我还没有测试它，但它应该可以工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1090262|ul+=+$("<ul/>");
$(json_arr).each(function(){
++++$("<li/>").text(this).appendTo(ul);
});

//+add+ul+to+DOM|code-block|syntax|javascript|1090263|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Something like this maybe?  I haven't tested it, but it should work.</p>

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

// add ul to DOM
</code></pre>


blocks|key|875656|text|这样的JSON字符串将如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|875657|'["foo","bar","base","ball"]'|code-block|syntax|javascript|875658|您可以通过调用JSON.parse()将其解析为Javascript数组对象，迭代该数组并插入字符串。|offset|length|style|CODE|875659|var+jsonstring+=+'["foo","bar","base","ball"]',
++++arr+=+JSON.parse(jsonstring),
++++len+=+arr.length;

while(len--)+{
++++$('<li>',+{+
++++++++text:+++arr[len]
++++}).appendTo('ul');
}|875660|entityMap^0|0|0|7|C|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>A JSON string like that would look like:</p>

<pre><code>'["foo","bar","base","ball"]'
</code></pre>

<p>You can parse that into an Javascript array object by calling <code>JSON.parse()</code>, iterate over that array and insert the strings.</p>

<pre><code>var jsonstring = '["foo","bar","base","ball"]',
    arr = JSON.parse(jsonstring),
    len = arr.length;

while(len--) {
    $('&lt;li&gt;', { 
        text:   arr[len]
    }).appendTo('ul');
}
</code></pre>


blocks|key|1090397|text|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)
++++);
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1090398|就使用AJAX从服务器获取JSON而言，您可以使用$.getJSON()函数。|unstyled|offset|length|style|CODE|1090399|Live+demo。|1090400|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/jQuery.getJSON/|1|http://jsfiddle.net/kAT8a/^0|0|P|B|P|B|0|0|0|9|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|X|8|@$G|Y|H|Z|I|J]]|9|@$G|10|H|11|1|12]]|A|$]]|$1|K|3|L|5|F|7|13|8|@]|9|@$G|14|H|15|1|16]]|A|$]]|$1|M|3|-4|5|F|7|17|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]|U|$5|P|Q|R|A|$S|V]]]]

<pre><code>var ul = $('&lt;ul&gt;').appendTo('body');
var json = { items: ['item 1', 'item 2', 'item 3'] };
$(json.items).each(function(index, item) {
    ul.append(
        $(document.createElement('li')).text(item)
    );
});
</code></pre>

<p>As far as fetching the JSON from your server using AJAX is concerned you could use the <a href="http://api.jquery.com/jQuery.getJSON/"><code>$.getJSON()</code></a> function.</p>

<p><a href="http://jsfiddle.net/kAT8a/">Live demo</a>.</p>


blocks|key|875766|text|<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>+"+%2B+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+%2B=+"<li+class='keyObj'+><strong>"+%2B+key+%2B+":</strong><ul+class='recurseSubObj'+>";
++++++++++++htmlRetStr+%2B=+recurse(+data[key]+);
++++++++++++htmlRetStr+%2B=+'</ul++></li+++>';
++++++++}+else+{
++++++++++++htmlRetStr+%2B=+("<li+class='keyStr'+><strong>"+%2B+key+%2B+':+</strong>&quot;'+%2B+data[key]+%2B+'&quot;</li++>'+);
++++++++}
++};
++htmlRetStr+%2B=+'</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>

|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|875767|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;script language="JavaScript" type="text/javascript"&gt;

// 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= "&lt;h3 class='recurse_title'&gt;[jsonDataArr] struct is&lt;/h3&gt; " + 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 = "&lt;ul class='recurseObj' &gt;"; 
  for (var key in data) {
        if (typeof(data[key])== 'object' &amp;&amp; data[key] != null) {
            htmlRetStr += "&lt;li class='keyObj' &gt;&lt;strong&gt;" + key + ":&lt;/strong&gt;&lt;ul class='recurseSubObj' &gt;";
            htmlRetStr += recurse( data[key] );
            htmlRetStr += '&lt;/ul  &gt;&lt;/li   &gt;';
        } else {
            htmlRetStr += ("&lt;li class='keyStr' &gt;&lt;strong&gt;" + key + ': &lt;/strong&gt;&amp;quot;' + data[key] + '&amp;quot;&lt;/li  &gt;' );
        }
  };
  htmlRetStr += '&lt;/ul &gt;';    
  return( htmlRetStr );
}

&lt;/script&gt;
&lt;/head&gt;&lt;body&gt;
&lt;button onclick="process_test_json()" &gt;Run process_test_json()&lt;/button&gt;
&lt;div id="out"&gt;&lt;/div&gt;
&lt;div id="outAsHtml"&gt;&lt;/div&gt;
&lt;/body&gt;

&lt;!-- QUESTION: Maybe some one with more jquery experience 
could convert this to a shorter / pure jquery method --&gt;
</code></pre>


blocks|key|875822|text|使用jQuery+jPut插件。只需创建一个html模板并调用您的json文件即可。您还可以通过jPut+(ajax_url)调用ajax文件|type|unstyled|depth|inlineStyleRanges|entityRanges|data|875823|http://plugins.jquery.com/jput/|offset|length|875824|<script>
++++$(document).ready(function(){
++++++++var+json+=+[{"name":+"item1","link":"link1"},{"name":+"item2","link":"link2"}];

++++++++++//jPut+code+
++++++++++$("#menu").jPut({
++++++++++++jsonData:json,
++++++++++++name:"template",
++++++++++});
++++});
</script>

<body>++++
++++++++
++++++++<div+jput="template">
+++++++++++<li><a+href="http://yourdomain.com/{{link}}">{{name}}</a></li>
++++++++</div>

++++++++
++++++++<ul+id="menu">
++++++++</ul>
</body>|code-block|syntax|javascript|875825|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|V|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|H|7|W|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|C]]]]

<p>Use jQuery jPut plugin. Just create a html template &amp; call your json file. you can also call the ajax file through jPut (ajax_url)</p>

<p><a href="http://plugins.jquery.com/jput/" rel="nofollow">http://plugins.jquery.com/jput/</a></p>

<pre><code>&lt;script&gt;
    $(document).ready(function(){
        var json = [{"name": "item1","link":"link1"},{"name": "item2","link":"link2"}];

          //jPut code 
          $("#menu").jPut({
            jsonData:json,
            name:"template",
          });
    });
&lt;/script&gt;

&lt;body&gt;    
        &lt;!-- jput template, the li that you want to append to ul--&gt;
        &lt;div jput="template"&gt;
           &lt;li&gt;&lt;a href="http://yourdomain.com/{{link}}"&gt;{{name}}&lt;/a&gt;&lt;/li&gt;
        &lt;/div&gt;

        &lt;!-- your main ul --&gt;
        &lt;ul id="menu"&gt;
        &lt;/ul&gt;
&lt;/body&gt;
</code></pre>


<p>How can you convert an array of strings represented in JSON format and convert this to an HTML bulleted list using jQuery?</p>


Use jQuery to convert JSON array to HTML bulleted list

服务器

jQuery

JSON

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

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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