Mustache不呈现JSON数据

时间:2018-05-29 00:36:04

标签: javascript jquery mustache

所以,我刚刚开始使用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调用获取一些数据,然后尝试在按钮点击时呈现该数据。没有数据呈现。有人可以告诉我我做错了什么吗?

请参阅此网址以查看返回数据的结构https://restcountries.eu/rest/v2/name/aruba?fullText=true

1 个答案:

答案 0 :(得分:0)

该API返回一个JSON数组,而不是一个对象,这就是它无法正常工作的原因。

如果您只想要第一项,您可以这样做:

let kSecClassValue = NSString(format: kSecClass)
let kSecAttrAccountValue = NSString(format: kSecAttrAccount)
let kSecValueDataValue = NSString(format: kSecValueData)
let kSecClassGenericPasswordValue = NSString(format: kSecClassGenericPassword)
let kSecAttrServiceValue = NSString(format: kSecAttrService)
let kSecMatchLimitValue = NSString(format: kSecMatchLimit)
let kSecReturnDataValue = NSString(format: kSecReturnData)
let kSecMatchLimitOneValue = NSString(format: kSecMatchLimitOne)


public class KeychainService: NSObject {
    class func updatePassword(service: String, account:String, data: String) {
        if let dataFromString: Data = data.data(using: String.Encoding.utf8, allowLossyConversion: false) {
            // Instantiate a new default keychain query
            let keychainQuery: NSMutableDictionary = NSMutableDictionary(objects: [kSecClassGenericPasswordValue, service, account, kCFBooleanTrue, kSecMatchLimitOneValue], forKeys: [kSecClassValue, kSecAttrServiceValue, kSecAttrAccountValue, kSecReturnDataValue, kSecMatchLimitValue])
            let status = SecItemUpdate(keychainQuery as CFDictionary, [kSecValueDataValue:dataFromString] as CFDictionary)
            if (status != errSecSuccess) {
                if let err = SecCopyErrorMessageString(status, nil) {
                    print("Read failed: \(err)")
                    print("status: \(status)")
                }
            }
        }
    }
...

或者您可以通过在对象属性中传递数组来遍历所有国家/地区: 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);
        });
    });
});

相关问题