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-21 12:30:04Z

3

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

edited May 21, 2014 at 12:30

answered May 21, 2014 at 11:40

Gajotres

57.3k16 gold badges106 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

degee Over a year ago

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 Over a year ago

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!

Gajotres Over a year ago

I am also a reputation wh*re so don't forget to accept and upvote if this is what you need ;)

degee Over a year ago

Lolz! You're damn right I did. Please link this question with this: stackoverflow.com/questions/23761044/… It's exactly what I was trying to do. But this time I got the JSON file from the Pipes service and it worked.

Gajotres Over a year ago

You want me to put it in my previous answer?

|

Collectives™ on Stack Overflow

Loop through an Array of JSON objects Using Handlebars

1 Answer 1

Update:

HTML:

JavaScript:

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update:

HTML:

JavaScript:

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related