Fat man moustache. javascript - JSON items not rendering

javascript - JSON items not rendering - Stack Overflow

This is my first look at in anticipation of using it for a larger project. Curly moustache name.

The problem I have is the spreadsheet JSON output I plan to use on my larger project doesn't have a name for the array. So based on the tutorial I followed on Lynda.com, ideally my array data would be called "fruits" but as you can see from my JSON data below, it outputs with no name for the array, just [].

How can I render my set of data in if there is no array name that can be used to output the template?

<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <title>Mustache Template</title>  <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">  <link href="css/thumbnail-gallery.css" rel="stylesheet"> </head> <body>  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"> <div class="container"> <a class="navbar-brand" href=""></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto">  </ul> </div> </div> </nav>  <div class="container"> <h1 class="my-4 text-center text-lg-left">Fruits/h1> <div id="fruitfeed" class="row text-center text-lg-left"></div> <script id="fruittpl" type="text/template"> {{#fruits}} <div class="col-lg-3 col-md-4 col-xs-6"> <a href="{{image}}" class="d-block mb-4 h-100"> <img class="img-fluid img-thumbnail" src="{{wiki}}" alt=""> </a> </div> {{/fruits}} </script> </div>   <footer class="py-5 bg-dark"> <div class="container"> <p class="m-0 text-center text-white">Copyright © 2017</p> </div>  </footer>  <script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/popper/popper.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.min.js"></script>   <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.cycle/2.9999.8/jquery.cycle.all.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js"></script> <script type="text/javascript"> $(function() { $.getJSON('https://api.myjson.com/bins/czrxt', function(data) { var template = $('#fruittpl').html(); var html = Mustache.to_html(template, {fruits:data}); $('#fruitfeed').html(html); }); //getJSON }); //function </script> </body> </html>

Hot men with moustache

I see three issues in your code:

The href in your template should be href="{{{wiki}}}". Note that the 3 curly brackets prevent the forward slashes and other special characters in the URL from being encoded (e.g. "/" -> "%2f").

The src parameter in the template should be src="{{{image}}}"

Big moustache man

As mentioned previously, pass {fruits:data} as the second parameter to the Mustache.to_html function.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"> <div class="container"> <a class="navbar-brand" href=""></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto">  </ul> </div> </div> </nav>  <div class="container"> <h1 class="my-4 text-center text-lg-left">Fruits/h1> <div id="fruitfeed" class="row text-center text-lg-left"></div> <script id="fruittpl" type="text/template"> {{#fruits}} <div class="col-lg-3 col-md-4 col-xs-6"> <a href="{{wiki}}" class="d-block mb-4 h-100"> <img class="img-fluid img-thumbnail" src="{{image}}" alt=""> </a> </div> {{/fruits}} </script> </div>   <footer class="py-5 bg-dark"> <div class="container"> <p class="m-0 text-center text-white">Copyright © 2017</p> </div>  </footer>  <script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/popper/popper.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.min.js"></script>   <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.cycle/2.9999.8/jquery.cycle.all.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js"></script> <script type="text/javascript"> $(function() { $.getJSON('https://api.myjson.com/bins/czrxt', function(data) { var template = $('#fruittpl').html(); var html = Mustache.to_html(template, {fruits:data}); $('#fruitfeed').html(html); }); //getJSON }); //function </script>

Men's goatee styles

How would i look without a mustache. javascript - JSON items not rendering - Stack Overflow

Hot men with moustache

Not the answer you're looking for? Browse other questions tagged javascript html angularjs json mustache or ask your own question.

Comments

Add Comment