आप जेएसओएन प्रारूप में प्रतिनिधित्व स्ट्रिंग्स की सरणी को कैसे परिवर्तित कर सकते हैं और इसे JQuery का उपयोग करके HTML बुलेट सूची में परिवर्तित कर सकते हैं?JSON सरणी को HTML बुलेट सूची में कनवर्ट करने के लिए JQuery का उपयोग करें
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);
}
या कुछ और इन पंक्तियों के बीच में यह क्या करना चाहिए।
ऐसा कुछ शायद हो सकता है? मैंने इसका परीक्षण नहीं किया है, लेकिन इसे काम करना चाहिए।
'["foo","bar","base","ball"]'
आप JSON.parse() फोन करके कि पार्स कर सकते हैं एक जावास्क्रिप्ट सरणी वस्तु में कि सरणी पर पुनरावृति और तार सम्मिलित करें: जैसे
ul = $("<ul/>");
$(json_arr).each(function(){
$("<li/>").text(this).appendTo(ul);
});
// add ul to DOM
ऐसे ही एक JSON स्ट्रिंग लगेगा।
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
jQuery jput प्लगइन का उपयोग करें। बस एक HTML टेम्पलेट बनाएं & अपनी जेसन फ़ाइल को कॉल करें। आप भी (ajax_url) jPut के माध्यम से ajax फ़ाइल कॉल कर सकते हैं
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
@Benio अपने एचटीएमएल में jput.js जोड़ें। – shabeer
'jput', जैसा कि आप उदाहरण कोड में दिखाते हैं, वैध विशेषता नहीं है। यदि आप कस्टम विशेषता का उपयोग करना चाहते हैं, तो आपको [एक कस्टम डेटा विशेषता] का उपयोग करना चाहिए (https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the- डेटा - * - विशेषताएँ), जैसे 'डेटा-जूट', अन्यथा यह एक वैध HTML कोड नहीं है। – Benio
आप अपने JSON संरचना का एक उदाहरण जोड़ सकते हैं? – wajiw
http://api.jquery.com/jQuery.getJSON/ – switz
@ स्विस, getJSON यह है कि मुझे डेटा कैसे मिलेगा - यह पता नहीं है कि किसी एक सरणी को सूची में कैसे परिवर्तित करें –