Json контент с использованием Jquery и Усы - Wamp

Question

Json контент с использованием Jquery и Усы - Wamp

У меня есть файл HTML с шаблоном MUSTACHE + файл JSON на моем сервере Wamp. Я хочу заполнить мой HTML содержимым JSON. Почему это сейчас работает?

.HTML

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Mustache Sample</title>
    </head>


    <body>
        <div id="speakerbox">
            <div id="carousel"></div>
        </div>

    <!--template-->
    <script id="speakerstpl" type="text/template">
        {{#speakers}}
            <div class="speakers">
                <h3>{{shortname}}</h3>
            </div>
        {{/speakers}}
    </script>

    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.8.1/mustache.min.js"></script>


    <script type="text/javascript">
        $(function(){
            $.getJSON('data.json', function (data){
                    var template = $('#speakerstpl').html();
                    var html = Mustache.to_html(template, data);
                    $('#carousel').html(html);
            }); //get json
        });//function
    </script>    

    </body>
    </html>

.JSON

[
  {
    "speakers": [
      {
        "name": "ana", 
        "shortname": "ann",
        "bio": "biogg"
      }, 
      {
        "name": "bolacha", 
        "shortname": "bol",
        "bio": "biogg de bolacha"
      }
     ]
  }
]

Есть ли проблема с Json?

Я что-то упустил в HTML?

Спасибо за помощь!

-1

jquery json wamp mustache

Источник

user4576154 17 фев '15 в 16:13

1 ответ

Решение

Другие вопросы по тегам jquery json wamp mustache

user215966 17 фев '15 в 16:27 2015-02-17 16:27 · Accepted Answer · 2015-02-17 16:27

Проблема у вас есть speakers заключенный в массив, что означает, что вам нужно использовать data[0] как ваш аргумент to_html ( скрипка):

   $(function(){
        $.getJSON('data.json', function (data){
                var template = $('#speakerstpl').html();
                var html = Mustache.to_html(template, data[0]);
                $('#carousel').html(html);
        }); //get json
    });//function

В качестве альтернативы вы можете удалить включающий массив, в этом случае ваш json будет выглядеть так ( fiddle):

{
    "speakers": [
      {
        "name": "ana", 
        "shortname": "ann",
        "bio": "biogg"
      }, 
      {
        "name": "bolacha", 
        "shortname": "bol",
        "bio": "biogg de bolacha"
      }
     ]
  }