jquery - 如何将 JSON 对象转换为有用的东西？

Question

这是我的 JSON 文件

"shipping":{
    "countries":{
        "150":{
            "id":150,
            "code":"nl",
            "title":"Nederland"
        }
    },
    "country":150,
    "zipcode":null,
    "methods":{
        "core|13490|40699":{
            "id":"core|13490|40699",
            "title":"ophalen",
            "description":"ophalen",
            "content":false,
            "pickup":true,
            "cod":false,
            "price":{
                "price_excl":"0.0000",
                "price_incl":"0.0000"
            }
    },
    "core|10292|40718":{
        "id":"core|10292|40718",
        "title":"Pakketdienst",
        "description":"Pakketdienst",
        "content":false,
        "pickup":false,
        "cod":false,
        "price":{
        "price_excl":"33.5714",
        "price_incl":"39.9500"}
        }
    }
}

我的脚本如下所示:

function bakVormShipping(targetClass){
    $.getJSON('http://shop.com/cart/?format=json', function(data){
        var methods = ''
        $.each(data.cart.shipping.methods, function(index, methods){
            if (index == "core|10292|40696") {
                $('<span></span>').html('<strong>' + methods.price.price_incl + '</strong>').appendTo(targetClass);
            }
            else if (index == "core|10292|40693") {
                $('<span></span>').html('<strong>' + methods.price.price_incl + '</strong>').appendTo(targetClass);
            }
            else if (index == "core|10292|40718") {
                $('<span></span>').html('<strong>' + methods.price.price_incl + '</strong>').appendTo(targetClass);
            }
        });
    });
}

首先做一些解释。您看到的 json 是从“购物车”页面调用的。您看到的第一种方法是运输方式:在商店提货。第二个用于实际运输。我想在我商店的不同页面上加载第二个(实际发货)。这样人们就可以看到运费是多少。所有产品均基于重量，因此当产品重量较大时，运输成本将更改为 ID 为“core|10292|40693”和“core|10292|40718”的方法(请参阅代码)，并且当然有不同的价格。所有这些都是动态的，因此 json 将始终具有提货方法和实际的运输方法。

我试图实现的是a) 缩短代码。例如 if (index == "core|10292|40696"|| "core|10292|40693"|| "core|10292|40718") 不起作用并打印出提货方法和实际运输方法。

和 b) 将输出转换为保留两位小数的货币。我搜索了这个论坛，但我无法让它在这段代码上工作。该代码现在打印 39.9500 而不是 39.95

c) 我想摆脱 $('<span></span>')因为代码现在打印跨度内的所有内容。我尝试使用 $(methods) 但这给出了“未定义”错误。显然是因为var methods =是“空”的，什么也不做。

有人有指示或愿意提供帮助吗？我对 JSON 和 jquery 还很陌生，所以请耐心等待。

Answer 1

a) if (index == "core|10292|40696" || "core|10292|40693" || "core|10292|40718") doesn't work

如果index做某事等于执行此操作所需的任何值:

if (index == "core|10292|40696" || index == "core|10292|40693"
    || index == "core|10292|40718")

b) Convert the output to currency with two decimals.

目前您的货币金额是字符串。以下使用 unary plus operator更改price_incl从字符串到数字，然后使用 .toFixed() method将它们四舍五入到小数点后两位:

(+methods.price.price_incl).toFixed(2)

+methods.price.price_incl 周围的括号是否存在，因为没有它们，方法调用 .toFixed(2)比一元加有更高的运算符优先级。

c) I want to get rid of $('<span></span>') because the code now prints everything in a span.

您可以像创建跨度一样创建强元素，即通过将 html 字符串传递给 $()函数(然后将结果附加到 targetClass 就像你已经做的那样):

$('<strong>' + methods.price.price_incl + '</strong>').appendTo(targetClass);

// OR, possibly easier to read but definitely more compact:
$('<strong/>').html(methods.price.price_incl).appendTo(targetClass);

// OR with the rounding included:
$('<strong/>').html((+methods.price.price_incl).toFixed(2)).appendTo(targetClass);