Question

This is my JSON file

"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"}
        }
    }
}

My script looks like this:

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);
            }
        });
    });
}

First some little explanation. The json you see is called from a “cart” page. The first method you see is shipping method: pick up at store. The second for actual shipping. I would like to load the the second one (actual shipping) on different pages in my shop. So people can see what the shipping costs are. All products are based on weight so when a products weighs more, then the shipping costs change to a method with id “core|10292|40693” and “core|10292|40718” (see the code) and have all different prices off course. All dynamically so the json will always have the pick up method and an actual shipping method.

What I try to achieve is
a) shorten the code. For example if (index == “core|10292|40696” || “core|10292|40693” || “core|10292|40718”) doesn’t work and prints out both the pick up method and the actual shipping method.

and b) Convert the output to currency with two decimals. I searched this forum but I can’t get that to work on this code. The code now prints 39.9500 instead of 39.95

c) I want to get rid of $('<span></span>') because the code now prints everything in a span. I tried using $(methods) but that gives an “undefined” error. Obviously because var methods =is “empty” and does nothing.

Does anyone have some directions or is willing to help? I’m pretty new to JSON and jquery so bear with me.

Answer 1

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

To do something if index equals any of those values you need to do this:

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

b) Convert the output to currency with two decimals.

Currently your currency amounts are strings. The following uses the unary plus operator to change price_incl from a string to a number, then uses the .toFixed() method to round them off to two decimal places:

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

The parentheses around +methods.price.price_incl are there because without them the method call to .toFixed(2) would have higher operator precendence than the unary plus.

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

You can create your strong elements the same way as you were creating the spans, i.e., by passing a string of html to the $() function (and then appending the result to targetClass like you already do):

$('<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);