JSON biçiminde temsil edilen Dizeler dizisini nasıl dönüştürür ve JQuery'yi kullanarak bu bir HTML madde işaretli listesine dönüştürebilirsiniz?JSON dizisini HTML madde işaretli listeye dönüştürmek için JQuery'yi kullanın
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)
);
});
Bildiğim kadarıyla $.getJSON() işlevini kullanabilirsiniz ilgilidir AJAX kullanarak sunucudan JSON getirilirken olarak.
sizin json dizeleri stringArr iseniz: Bu satırların arasında
$.each(stringArr, function(idx, val) {
$('<li></li>').html(val);
}
falan yapmalı.
Böyle bir şey olabilir mi? Test etmedim ama işe yaramalı. Sen, JSON.parse() arayarak bir JavaScript dizi nesnesine o ayrıştırmak o diziyi sürekli tekrarlanması ve dizeleri ekleyebilirsiniz
'["foo","bar","base","ball"]'
: gibi böyle
ul = $("<ul/>");
$(json_arr).each(function(){
$("<li/>").text(this).appendTo(ul);
});
// add ul to DOM
Bir JSON dizesi görünürdü.
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 -->
Özyineyi düşünmüyordum. Teşekkürler. – InbetweenWeekends
jQuery jPut eklentisini kullanın. Sadece bir html şablonu oluşturun & json dosyanızı arayın. Ayrıca
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' geçerli bir özellik değil. – Benio
@Benio HTML'nize jput.js dosyasını ekleyin. – shabeer
'jput', örnek kodda gösterdiğiniz gibi geçerli bir özellik değildir. Özel bir özellik kullanmak istiyorsanız, [özel bir veri özelliği] kullanmalısınız (https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the- data-jput gibi veri - * - öznitelikleri), aksi halde geçerli bir HTML kodu değildir. – Benio
Eğer JSON yapısının bir örneğini ekleyebilir miyim (ajax_url) jPut aracılığıyla ajax dosyayı arayabilir? – wajiw
http://api.jquery.com/jQuery.getJSON/ – switz
@Switz, getJSON veriyi nasıl alacağım - dizilerden birini listeye dönüştürme konusunda net değil –