Come strutturare JSON e costruire HTML tramite jQuery

Principiante qui cercando di capire il modo migliore per strutturare alcune JSON e l'uscita in basso annidato <ul>Come strutturare JSON e costruire HTML tramite jQuery

Ognuno degli elementi in grassetto di seguito sono i valori nel JSON. Come potrei strutturare il JSON e poi come costruire la struttura DOM con jQuery? Qualsiasi aiuto molto apprezzato.

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

fonte

2010-07-30 Brandon

Date un'occhiata qui: http://stackoverflow.com/questions/1082928/convert-json-to-html-tree –

sono diventato un grande fan di mustache.js di recente per fare esattamente questo genere di cose.

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

Modifica:

se tweak formato JSON di calvinf un po ', allora questo è un esempio usando mustache.js:

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

Se si desidera un punto di riferimento per la velocità di JavaScript librerie di modelli ho trovato questo link utile:

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

fonte

2010-07-30 20:27:31

baffi .js è un buon sistema di template per il check-out. Darei anche uno sguardo a jquery-tmpl poiché sarà probabilmente incluso in jQuery 1.5 sulla base dei commenti che jeresig ha fatto. http://github.com/jquery/jquery-tmpl – calvinf

Il template di Resig è super-pericoloso, in quanto non riesce a codificare in HTML di default (o anche opzionalmente). Qualunque cosa tu abbia costruito su di esso è destinato a migliaia di buchi di sicurezza XSS con iniezione HTML. Stai lontano. (Il baffo non rende questo grave errore.) – bobince

@bobince - mentre sono completamente d'accordo sul fatto che non l'** opzione ** di input di codifica HTML in un Javascript lato client non è affatto buona, non è un migliore pratica per gestire la codifica HTML sul lato server? –

La prima raccomandazione è dare un'occhiata allo JSON site. Ha alcuni esempi di codice JSON in JavaScript.

Se stai strutturando il tutto da JSON, lo farei in questo modo.

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"} 
    ] 
    } 
};

Se avete solo bisogno di un sottoinsieme delle informazioni che si possa fare in modo diverso, ma questo dovrebbe darvi qualcosa da cui partire.

Per aggiornare il DOM con questi valori, è possibile eseguire il ciclo attraverso la matrice appropriata dall'oggetto JSON e quindi compilare i valori. Utilizzare lo jQuery .html(htmlString) function.

Spero che questo ti aiuti a iniziare.

fonte

2010-07-30 20:27:37 calvinf

Raccomanderei l'eccellente funzione templatetemplate per questo genere di cose.

fonte

2010-07-30 20:41:04

È possibile utilizzare i metodi DOM-come per impostare attributi e contenuto del testo invece di evitare i problemi di escape HTML che si avranno con semplice html() -setting e il più ingenuo dei sistemi di template. Ad esempio, utilizzando jQuery 1.4 e con il contributo JSON lungo le linee di esempio di calvinf:

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

fonte

2010-07-30 22:21:15 bobince

Come strutturare JSON e costruire HTML tramite jQuery

risposta

Problemi correlati