2011-09-12 10 views
5

Guardate questo JSON per un secondo. Sì, è annidato come l'inferno. E ho bisogno che sia nidificato per mantenere la gerarchia dei dati.Modelli Jquery - JSON annidato (nomi di chiavi univoci)

JSON from firebug console

mio problema è che le chiavi non sono generici (a causa di C# chiavi dizionario non può essere lo stesso). Essi variano a seconda dei dati. Il mio modello è simile al seguente finora:

<script id="customerTemplate" type="text/x-jQuery-tmpl"> 
     {{each $data}} 
      <div class="Customer"> 
       <input class="CustomerId" type="hidden" value="${ $index }" /> 
       <div class="CustomerHeader"> 
        <div class="NameAndCheckbox"> 
         <input type="checkbox" checked="checked" class="CustomerCheckbox" /> 
         <span class="HeadlineText">${ $index }</span> 
        </div> 
       </div> 
       <div class="CustomerProjectWrapper"> 

        /* HOW TO ACCESS DATA WITHIN $data */ 
       </div> 
      </div> 
     {{/each}} 
    </script> 

Come vedete, voglio accedere al JSON all'interno $data. Il valore di $data contiene JSON, ma non conosco la sintassi per accedervi .. e all'interno di ogni valore di $data c'è anche anche JSON.

Come posso fare questo?

Nota:

Questo è il mio codice jQuery:

$.template("ctmpl", $("#customerTemplate"));

$.tmpl("ctmpl", jsonobject).appendTo("#CustomerContainer");

+0

Proprio A proposito, questo non è un JSON, è un oggetto JavaScript. JSON è un formato di serializzazione. Potresti riceverlo dal server come JSON, ma una volta che lo analizzi è solo un Oggetto. – orip

+0

sì okay ... Ho JSON (stringa) dalla chiamata ajax che faccio prima di questo. Il che è fatto in questo modo 'var jsonobject = $ .parseJSON (response);'. Pensi che dovrei usare il json (non l'oggetto javascript)? – KristianB

+0

no, solo un problema di terminologia – orip

risposta

8

È possibile utilizzare una sintassi simile a questo: {{each(index, value) array}} avere una chiara idea dell'indice/valore quello che stai collegando. {{each}} può scorrere le proprietà su un oggetto.

Quindi, se avete avuto i dati come questo:

var data = { 
    testA: { 
     testA1: { 
      testA1A: "blahA1A", 
      testA1B: "blahA1B" 
     }, 
     testA2: { 
      testA2A: "blahA2A", 
      testA2B: "blahA2B" 
     } 
    }, 
    testB: { 
     testB1: { 
      testB1A: "blahB1A", 
      testB1B: "blahB1B" 
     }, 
     testB2: { 
      testB2A: "blahB2A", 
      testB2B: "blahB2B" 
     }, 
    } 
}; 

Si potrebbe scrivere un modello come questo:

<script id="contentTmpl" type="text/html"> 
    <ul> 
    {{each(i, item) $data}} 
     <li>${i}</li> 
     <ul> 
     {{each(j, subItem) item}} 
      <li>${j}</li>  
      <ul> 
      {{each(k, subSubItem) subItem}} 
       <li>${k} = ${subSubItem}</li> 
      {{/each}} 
      </ul> 
     {{/each}} 
     </ul> 
    {{/each}} 
    </ul> 
</script> 

campione qui: http://jsfiddle.net/rniemeyer/8PLGP/

+0

Esattamente quello di cui avevo bisogno ... Grazie! – KristianB

+0

Questo è fantastico! Ottimo lavoro –