JSON संरचना और jQuery

शुरुआती के माध्यम से एचटीएमएल निर्माण यहां बोल्ड आइटम में से प्रत्येक कुछ JSON संरचना करने के लिए सबसे अच्छा तरीका है और उत्पादन नीचे नेस्ट < उल >JSON संरचना और jQuery

यह पता लगाने के लिए नीचे JSON में मान रहे हैं की कोशिश कर कैसे। मैं JSON को कैसे बना सकता हूं और फिर jQuery के साथ DOM संरचना कैसे बना सकता हूं? किसी भी मदद की बहुत सराहना की।

<ul> 
    <li>Topic 1 
     <ul> 
      <li id="foo_item1a"> 
       <a href="destination_Item1a"> 
        <strong>Lorem</strong> 
        <span>Item 1a</span> 
        <em>Ipsum</em> 
       </a> 
      </li> 
      <li id="foo_item1b"> 
       <a href="destination_Item1b"> 
        <strong>Dolor</strong> 
        <span>Item 1b</span> 
        <em>Sit</em> 
       </a> 
      </li> 
     </ul> 
    </li> 
    <li>Topic 2 
     <ul> 
      <li id="foo_item2a"> 
       <a href="destination_Item2a"> 
        <strong>Lorem</strong> 
        <span>Item 2a</span> 
        <em>Ipsum</em> 
       </a> 
      </li> 
      <li id="foo_item2b"> 
       <a href="destination_Item2b"> 
        <strong>Dolor</strong> 
        <span>Item 2b</span> 
        <em>Sit</em> 
       </a> 
      </li> 
     </ul> 
    </li> 
</ul>

स्रोत

2010-07-30 Brandon

यहाँ एक नज़र: http://stackoverflow.com/questions/1082928/convert-json-to-html-tree –

मैं बात की बिल्कुल इस तरह से करने के लिए mustache.js के एक बड़े प्रशंसक बन गए हैं हाल ही में।

http://github.com/janl/mustache.js/

संपादित करें: का उपयोग कर mustache.js

अगर मैं calvinf के JSON प्रारूप में बदलाव एक छोटे से तो यह एक उदाहरण है:

<html> 
    <head> 
    <script type="text/javascript" src=" http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://github.com/janl/mustache.js/raw/master/mustache.js"></script> 
    <script type="text/javascript"> 
    var topics = { 
    topics: [ 
    { 
    title : "Topic 1", 
    items : [ 
     {title: "1a", link: "http://www.example.com/", text: "Link Text or HTML"}, 
     {title: "1b", link: "http://www.example.com/", text: "Link Text or HTML"} 
    ] 
    }, 
    { 
    title : "Topic 2", 
    items : [ 
     {title: "2a", link: "http://www.example.com/", text: "Link Text or HTML"}, 
     {title: "2b", link: "http://www.example.com/", text: "Link Text or HTML"} 
    ] 
    } 
    ]}; 


var template = "<ul>{{#topics}}<li>{{title}}<ul>{{#items}}<li id=\"foo_item{{title}}\"><a href=\"{{link}}\">{{text}}</a></li>{{/items}}</ul>{{/topics}}</ul>"; 

     $(document).ready(function() { 
    $("#topics").html(Mustache.to_html(template, topics)); 
     }); 

    </script> 
    <title></title> 
    </head> 
    <body> 
    <div id="topics"></div> 
    </body> 
</html>

आप जावास्क्रिप्ट के लिए एक गति बेंचमार्क चाहते हैं टेम्पलेटिंग लाइब्रेरीज़ मुझे यह लिंक उपयोगी पाया:

http://www.viget.com/extend/benchmarking-javascript-templating-libraries/

स्रोत

2010-07-30 20:27:31

मूंछें .js जांचने के लिए एक अच्छा templating प्रणाली है। मैं jquery-tmpl पर भी एक नज़र डालेगा क्योंकि इसे जेसीआरआईजी टिप्पणियों के आधार पर jQuery 1.5 में शामिल किया जाएगा। http://github.com/jquery/jquery-tmpl – calvinf

रेजिग का टेम्पलेटिंग अति-खतरनाक है, क्योंकि यह डिफ़ॉल्ट रूप से HTML-encode में विफल रहता है (या यहां तक कि वैकल्पिक रूप से)। जो भी आप इसे बनाते हैं वह एक हजार एचटीएमएल-इंजेक्शन एक्सएसएस सुरक्षा छेद के लिए बर्बाद हो जाता है। अच्छी तरह से रहो। (मूंछ इस गंभीर त्रुटि को नहीं बनाता है।) – bobince

@bobince - जबकि मैं पूरी तरह से सहमत हूं कि क्लाइंट-साइड जावास्क्रिप्ट में एचटीएमएल-एन्कोडिंग इनपुट का ** विकल्प ** बिल्कुल अच्छा नहीं है, है ना? सर्वर पक्ष पर एचटीएमएल-एन्कोडिंग को संभालने के लिए बेहतर अभ्यास? –

पहली सिफारिश JSON site पर एक नज़र डाल रही है। इसमें जावास्क्रिप्ट में JSON कोड के कुछ उदाहरण हैं।

यदि आप JSON से पूरी चीज को व्यवस्थित कर रहे हैं, तो मैं इसे ऐसा करूंगा।

var topics = { 
    topic1: { 
    title : "Topic 1", 
    items : [ 
     {title: "1a", link: "http://www.example.com/", text: "Link Text or HTML"}, 
     {title: "1b", link: "http://www.example.com/", text: "Link Text or HTML"} 
    ] 
    }, 
    topic2: { 
    title : "Topic 2", 
    items : [ 
     {title: "2a", link: "http://www.example.com/", text: "Link Text or HTML"}, 
     {title: "2b", link: "http://www.example.com/", text: "Link Text or HTML"} 
    ] 
    } 
};

यदि आपको केवल जानकारी का सबसेट चाहिए तो आप इसे अलग-अलग कर सकते हैं, लेकिन इससे आपको कुछ शुरू करना चाहिए।

इन मानों के साथ डोम को अपडेट करने के लिए, आप JSON ऑब्जेक्ट से उचित सरणी के माध्यम से लूप कर सकते हैं और फिर मानों को पॉप्युलेट कर सकते हैं। jQuery .html(htmlString) function का उपयोग करें।

मुझे आशा है कि इससे आपको शुरुआत करने में मदद मिलेगी।

स्रोत

2010-07-30 20:27:37 calvinf

मैं इस तरह की चीज के लिए उत्कृष्ट underscore.js के template फ़ंक्शन की अनुशंसा करता हूं।

स्रोत

2010-07-30 20:41:04

आप एचटीएमएल-एस्केपिंग मुद्दों से बचने के लिए विशेषताओं और टेक्स्ट सामग्री को सेट करने के लिए डीओएम जैसी विधियों का उपयोग कर सकते हैं, जो आपके पास html() -सेटिंग और टेम्पलेटिंग सिस्टम के अधिक भरोसेमंद होंगे। jQuery 1.4 और का उपयोग कर उदाहरण के लिए calvinf के उदाहरण की तर्ज पर JSON इनपुट के साथ:

var ul0= $('<ul>'); 
$.each(topics, function() { 
    var li0= $('<li>', {text: this.title}); 
    var ul1= $('<ul>'); 
    $.each(this.items, function() { 
     ul1.append($('<li>', {id: 'foo_'+this.title}) 
      .append($('<a>', {href: this.link, text: this.text}) 
       .append($('<strong>', {text: this.data0})) 
       .append($('<span>', {text: this.data1})) 
       .append($('<em>', {text: this.data2})) 
      ) 
     ); 
    }); 
    li0.append(ul1); 
    ul0.append(li0); 
});

स्रोत

2010-07-30 22:21:15 bobince

JSON संरचना और jQuery

उत्तर

संबंधित मुद्दे