Loop through an Array of JSON objects Using Handlebars

Question

I have JSON data with this format

        {
          "count": 3,
          "value": {
            "title": "Daily Feeds Mashup",
            "description": "Feeds Description",
            "items": [
              {
                "title": "Title One",
                "link": "http://linkone.com",
                "description": "Title one description"
              },
              {
                "title": "Title Two",
                "link": "http://titletwo.com",
                "description": "Title two description"
              },
              {
                "title": "Title Three",
                "link": "http://linkone.com",
                "description": "Title three description"
              }
            ]
          }
        }

The "items" part is an array. How can I construct a template in Handlebars to give me a an html result in a jQM listview. Here's the full html source of what I currently have, including the JavaScript

    <script src="libs/jquery-2.0.3.min.js"></script>
    <script src="libs/jquery.mobile-1.4.0.min.js"></script>
    <script src="libs/handlebars-v1.3.0.js"></script>

    <link rel="stylesheet" href="../styles.css">

    <script type="text/javascript">
        $("document").ready(function() {

            var template = $("#itemTemplate").html();
            var renderer = Handlebars.compile(template);
            var result = renderer({
                "count" : 3,
                "value" : {
                    "title" : "Daily Feeds Mashup",
                    "description" : "Feeds Description",
                    "items" : [{    
                        "title" : "Title One",
                        "link" : "http://linkone.com",
                        "description" : "Title one description"
                    }, {
                        "title" : "Title Two",
                        "link" : "http://titletwo.com",
                        "description" : "Title two description"
                    }, {
                        "title" : "Title Three",
                        "link" : "http://linkone.com",
                        "description" : "Title three description"
                    }]
                }
            });
            $("#container").html(result);
        });
    </script>
</head>
<body>
    <div data-role="page" id="home">
        <div data-role="header">
            <h3>Header<h3>
        </div>

        <div data-role="content">
            <script type="text/x-handlebars-template" id="itemTemplate">
                <ul data-role="listview" id="posts">
                    {{#each items}}
                        <li>
                            <a data-transition="" href="{{{link}}}">
                                <p>{{{title}}}</p>
                                <small>{{{description}}}</small>
                            </a>
                        </li>
                    {{/each}}
                </ul>
            </script>

            <h1>This is my header one</h1>
            <h3>This is my header three</h3>

            <!-- This is the container where the templates will be instantiated -->
            <div id="container"></div>

        </div>


    </div><!-- page -->
</body>

Gajotres · Accepted Answer · 2014-05-21T12:30:04.807

Working example: https://github.com/theAcadian/phonegap-workshop-jqm/blob/master/index.html

Update:

Working jsFiddle: http://jsfiddle.net/Gajotres/vds2U/43/

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> 
        <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>    
    </head>
    <body>     
        <div data-role="page" id="index" data-theme="a" >
            <div data-role="header">
                <h3>
                    First Page
                </h3>
            </div>

            <div data-role="content">
                <script id="items-template" type="text/x-handlebars-template">
                    {{#.}}
                    <li><a href="{{this.link}}"><h3>{{this.title}}</h3><p>{{this.description}}</p></a></li>
                    {{/.}}
                </script>                
                <ul id ="items_list" data-role="listview" data-filter="true">
                </ul>           
            </div>

            <div data-role="footer" data-position="fixed">

            </div>
        </div> 
    </body>
</html>

JavaScript:

$(document).on('pagebeforeshow', '#index', function(){ 
    var items = {
        "count": 3,
        "value": {
            "title": "Daily Feeds Mashup",
            "description": "Feeds Description",
            "items": [
                {
                    "title": "Title One",
                    "link": "http://linkone.com",
                    "description": "Title one description"
                },
                {
                    "title": "Title Two",
                    "link": "http://titletwo.com",
                    "description": "Title two description"
                },
                {
                    "title": "Title Three",
                    "link": "http://linkone.com",
                    "description": "Title three description"
                }
            ]
        }
    };

    var itemsHandler = Handlebars.compile($("#items-template").html());
    $('#items_list').html(itemsHandler(items.value.items)); 
    $('#items_list').listview().listview('refresh');
});

I've seen examples like this. Can't seem to apply it to this particular type of issue. You see, the array on items is not on the main level of the json data. Somehow that's why I can't access it. Can you please do a working fiddle with my source, that way I'll see where exactly I'm missing it — degee, May 21 '14 at 12:21
Geez!!! You are one hell of a geek. I couldn't have thought about it the way you did. Thanks. You are just too much! — degee, May 21 '14 at 14:33
I am also a reputation wh*re so don't forget to accept and upvote if this is what you need ;) — Gajotres, May 21 '14 at 14:37
Lolz! You're damn right I did. Please link this question with this: http://stackoverflow.com/questions/23761044/using-handlerbars-with-yahoo-pipes It's exactly what I was trying to do. But this time I got the JSON file from the Pipes service and it worked. — degee, May 21 '14 at 15:19
Yes, so future users won't get lost. It's linked to this one. — degee, May 21 '14 at 15:33

Loop through an Array of JSON objects Using Handlebars

1 Answers1

Update:

HTML:

JavaScript:

Linked