使用JQuery將JSON數組轉換爲HTML項目符號列表

如何轉換以JSON格式表示的字符串數組並將其轉換爲使用JQuery的HTML項目符號列表？使用JQuery將JSON數組轉換爲HTML項目符號列表

2010-11-15 Marcus Leon

您可以添加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

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。

Live demo。

來源

2010-11-15 22:23:11

我以前從未見過jsfiddle.net。我同意。 – climbage 2010-11-15 22:30:00

@climbage，這是一個非常好的網站，可以讓支持流行框架的快速javascript模型。 – 2010-11-15 22:30:57

非常好，謝謝。我將從現在開始使用它。 – climbage 2010-11-15 22:33:47

如果你的JSON字符串在stringArr：

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

什麼的這些行當中應該這樣做。

來源

2010-11-15 22:18:22 charisis

可能是這樣的嗎？我沒有測試過，但它應該可以工作。

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

// add ul to DOM

來源

2010-11-15 22:18:47 climbage

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

來源

2010-11-15 22:22:14 jAndy

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

來源

2011-06-08 00:17:11 user579338

我並沒有考慮遞歸。謝謝。 – 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>

來源

2014-06-01 14:46:56 shabeer

'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

使用JQuery將JSON數組轉換爲HTML項目符號列表

回答

相關問題