Question

I’m trying to put data from this JSON object (from Google Books API) into an HTML template. The JSON looks like this:

{
 "kind": "books#volumes",
 "totalItems": 4,
 "items": [
  {
   "kind": "books#volume",
   "id": "LcQXAAAAYAAJ",
   "selfLink": "https://www.googleapis.com/books/v1/volumes/LcQXAAAAYAAJ",
   "volumeInfo": {
    "title": "The Arabian Nights",
    "authors": [
     "George Fyler Townesend"
    ]
   }
  },
  {
   "kind": "books#volume",

…
full JSON: http://goo.gl/993CL

My template (via jquery.tmpl ) looks like this:

var markup = "<tr><td>${kind}</td><td>${totalItems}</td><td>${items.volumeInfo.title}</td></tr>";

However when I run it, it only displays the first of these three columns:

   <tr><td>result 1</td></tr>
   <tr><td>result 2</td></tr>
   <tr><td>result 3</td></tr>

Why isn’t $totalItems displaying? And what is the proper path to get the title?

${items.volumeInfo[*].title}   ? 

Here’s the fiddle: http://jsfiddle.net/khcsq

Answer 1

You can’t just do items.volumeInfo. You’ll have to run an each loop on items:

var markup = "{{each items}}<tr><td>${volumeInfo.title}</td></tr>{{/each}}";

---

See here: http://jsfiddle.net/khcsq/3/