kinlane
1/30/2013 - 8:24 PM

This is a basic example of how to render a JSON list of agencies as HTML on entirely client side page running on Github

This is a basic example of how to render a JSON list of agencies as HTML on entirely client side page running on Github

      <!--Javascript that pulls JSON and renders it to the page-->
      <script type="text/javascript">
      
          // Calls JSON file then merges with HTML
          function listAgencies()
              {
              $.getJSON('agencies.json', function(data) {          
                   $.each(data['agencies'], function(key, val) {
                          var template = $('#agencyListingTemplate').html();
                          var html = Mustache.to_html(template, val);
                          $('#agencyListing').append(html);;
                      });  
                  });        
              }   
              
          // Runs the function above   
          listAgencies();         
      </script>
      
      <!--A template that provides layout for each entry in the JSON file-->
      <script id="agencyListingTemplate" type="text/template">
          <li>
            <a href="{{url}}">{{name}}</a>
          </li>         
      </script>
      
      <!--This is where the JSON will actually be rendered as HTML-->
      <ul id="agencyListing">
      
      </ul>