使用JSON对象中的数据进行动态货币转换

Using data in JSON object for dynamic currency conversion

本文关键字：动态 货币 转换 数据 JSON 对象 使用      更新时间：2023-09-26

我有一个HTML文档，格式如下：

<form>
    <input type="text" id="price">
    <input type="text" id="converted">
</form>

我还有以下JQuery：

$('#price').bind('keypress keyup', function() {
    amount = $(this).val() * 30;
    $('#converted').val(amount);
});

这正是我想要的。如果我在"price"中键入一个金额，那么"converted"中的值就会用我键入的值乘以30来更新。

然而，我希望这能支持两种不同的汇率，所以我在表单中创建了以下选择：

<select id="choice">
    <option value="1">Currency 1</option>
    <option value="2">Currency 2</option>
</select>

我知道我可以将上面的值设置为实际汇率，然后这个问题就会很快得到解决。但是，我需要这些值作为提交表单时的货币ID。因此，我提供了以下JSON对象：

[{"Currency":{"id":"1","rate":"30"}},{"Currency":{"id":"2","rate":"25"}}]

我在DOM中有这个内联，因为我不想每次在输入字段中键入新的数字时都浪费ajax请求。转换不需要是最新的。上面的JSON对象是使用CakePHP的$javascript->object生成的，我可以让它在脚本标记中显示，也可以让JQuery轻松访问它。

我正在努力解决的部分(可能在谷歌上找不到，因为我不知道该用哪个术语(是在JQuery的第二行使用"30"或"25"作为乘数的一种方式，这取决于在选择中选择了选项值"1"还是"2"。

var json = [{"Currency":{"id":"1","rate":"30"}},{"Currency":{"id":"2","rate":"25"}}];
$('#price').bind('keypress keyup', function() {
    var rate = $(json).filter(function() {
        return this.Currency.id == $('#choice').val();
    }).get(0).Currency.rate;
    var amount = $(this).val() * rate;    
    $('#converted').val(amount);
});

这里有一个现场演示来看看这一点。

选择更好的数据格式。在HTML中使用有意义的货币ID：

<select id="choice">
    <option value="GBP">Pounds</option>
    <option value="EUR">Euros</option>
</select>

然后将它们用作json对象中的键。请注意，不应引用数字。

//Assume base rate is dollars
var json = {
    "GBP": {
        "rate": 0.633
    },
    "EUR": {
        "rate": 0.725
    }
};
var price = $('#price'),
    currencyId = $('#choice'),
    converted = $('#converted');
price.keydown(function() {
    // Some browers call keydown before the character pressed has been added
    // to `.val()`. This gives them time to update the value
    setTimeout(function() {
        var currency = json[currencyId.val()];
        var amount = price.val() * currency.rate;
        converted.val(amount);
    }, 0);
});

演示

相关文章：