Усы не рендерит данные JSON - PullRequest
Новая
       7

Усы не рендерит данные JSON

0 голосов
/ 29 мая 2018

Итак, я только что начал с Mustache JS.У меня есть этот простой HTML-файл 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>JavaScript Mustache template</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
</head>

<body>
    <script id="mp_template" type="text/template">
        <p>Country: {{ name }}</p>
        <p>Capital: {{ capital }}</p>
        <p>Flag: <img src={{{ flag }}} ></p>
    </script>
    <div id="mypanel"></div>
    <button id="btn">Load</button>
    <script>
        $(function () {
            $("#btn").on('click', function () {
                $.getJSON('https://restcountries.eu/rest/v2/name/aruba?fullText=true', function (data) {
                    var template = $("#mp_template").html();
                    var text = Mustache.render(template, data);
                    console.log(data);
                    $("#mypanel").html(text);
                });
            });
        });
    </script>

. Он возвращает некоторые данные с помощью вызова .getJSON, а затем пытается отобразить эти данные по нажатию кнопки.Нет данных рендеринга.Может кто-нибудь подсказать, пожалуйста, что я делаю не так?

Пожалуйста, посмотрите этот URL, чтобы увидеть структуру возвращаемых данных https://restcountries.eu/rest/v2/name/aruba?fullText=true

1 Ответ

0 голосов
/ 29 мая 2018

Этот API возвращает массив JSON, а не объект, поэтому он не работает.

Если вам нужен только первый элемент, вы можете сделать: 

 var template = $("#mp_template").html();
 var text = Mustache.render(template, data[0]);
 console.log(data);
 $("#mypanel").html(text);

ИлиВы можете перебирать все страны, передавая массив в свойстве объекта: { countries: data } и использовать {{#countries}} в своем шаблоне 

$(function () {
    $("#btn").on('click', function () {
        $.getJSON('https://restcountries.eu/rest/v2/name/aruba?fullText=true', function (data) {
            var template = $("#mp_template").html();
            var text = Mustache.render(template, { countries: data });
            $("#mypanel").html(text);
        });
    });
});
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
</head>

<body>
    <script id="mp_template" type="text/template">
      {{#countries}}
        <p>Country: {{ name }}</p>
        <p>Capital: {{ capital }}</p>
        <p>Flag: <img src={{{ flag }}} style="width: 50px"></p>
      {{/countries}}
    </script>
    <div id="mypanel"></div>
    <button id="btn">Load</button>
</body>
...