Wie man diesen Json abbildet, um mit Handles js zu arbeiten?

Question

Ich habe eine Json mit dieser Struktur:

 var data = { 
      "h": { 
       "results": { 
        "0": { 
         "title": "Do feral cats affect small animals?", 
         "authors": " Billie Theresa Lazenby, Billie Theresa Lazenby", 
         "url": "#", 
         "published": 2012, 
         "summary": "" 
        } 
       }, 
       "categoryTitle": "Sydney eScholarship", 

      }, 
      "j": { 
       "results": { 
        "0": { 
         "title": "Utagawa Kunisada II", 
         "description": "You can learn more ...", 
         "url": "#", 
         "thumb": "#", 
         "published": 2010 
        }, 
        "1": { 
         "title": "Utagawa Kunisada II2", 
         "description": "You can learn more ...", 
         "url": "#", 
         "thumb": "#", 
         "published": 2012 
        } 
       }, 
       "categoryTitle": "YouTube", 

      } 
     } 

und der js ist wie folgt:

 var source = $("#entry-template").html(); 
     var template = Handlebars.compile(source); 
     var html = template(data); 
     $('#Content').html(html); 

Ich brauche den Zugang zu data.h.categoryTitle und data.j.categoryTitle als erstem zu erhalten Iteration dann data.h.results.Title und data.j.results [0] .Title und data.j.results [1] .Title als verschachtelte Iteration, das ist meine Vorlage:

<div id="content"> </div> 
<script id="entry-template" type="text/x-handlebars-template"> 

    {{#each data}} 
    <div class="searchResultItem col-sm-9 col-xs-12"> 
     {{#each results}} 
     <a href="#" class="title">{{this.title}}</a> 
     {{/each}} 
     <span>{{this.categoryTitle}}</span> 
    </div> 
    {{/each}} 
</script> 

Sein nicht zeigt alles: - | Wie kann ich das mit Lenker machen?

Vielen Dank!

Answer 1

Sie haben die ID in den falschen Fall falsch eingegeben, der Buchstabe "C" ist in Großbuchstaben in das Skript eingegeben, während es in der HTML klein geschrieben wird. Daher ist es nicht möglich, das Element zum Rendern des generierten HTML zu finden. deshalb erscheint nichts.

ändern die Linien

var html = template(data); 
$('#Content').html(html); 

zu

var html = template({data: data}); 
$('#content').html(html); 

Answer 2

Der schwierige Seite ist, die Daten konvertieren zu entsprechen, was Lenker richtig interpretieren kann. Sie müssen Objekte zuverlässig in Arrays konvertieren können (Quelle unten).

Lenker unterstützt das Durchschleifen von Objekten, also ignoriere meine Array-Konvertierung. Quelle: Handlebars/Mustache - Is there a built in way to loop through the properties of an object?

In Ihrem Lenker Vorlage, können Sie leicht es etwas in dieser Richtung müssen zwicken: -

<script id="entry-template" type="text/x-handlebars-template"> 
{{#each data}} 
<div class="searchResultItem col-sm-9 col-xs-12"> 
    {{#each this.results}} 
    <a href="#" class="title">{{this.title}}</a> 
    {{/each}} 
    <span>{{this.categoryTitle}}</span> 
</div> 
{{/each}} 
</script> 

Dann wird dieser in Lenker zugreifen, wie Sie möchten, sollten Sie Ihre Vorlage sein aufgerufen, wie folgt aus: -

var html = template({data: data}); 
$('#Content').html(html); 

Hinweis ist dies nicht erforderlich, dieses Problem zu lösen - erforderlich für alte, Legacy-Lenker nur dort, wo es eine Herausforderung sein kann, um Objekte zu iterieren. Hier ist ein Ausgangspunkt ist es, Objekte zu Arrays für die Umwandlung: -

var arr = Object.keys(obj).map(function(k) { return obj[k] }); 

Um Objekte zu Arrays zu konvertieren, hier einige nützliche Links: -

• Converting a JS object to an array
• Converting JSON Object into Javascript array