小胡子未呈现 JSON 数据

Question

所以，我刚刚开始使用 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

Answer 1

那个 API returns 一个 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>

小胡子未呈现 JSON 数据

Mustache not rendering JSON data

javascript

jquery

mustache