Membuat format rupiah di js

Sy sudah cari di google tapi iplementasinya yang belum paham. Jadi ceritanya saya membuat keranjang belanja dgn menggunakan plugin j Query.mycart. Nah di demo plugin tersebut menggunakan format dollar, sy bingung untuk merubahnya ke rupiah bagaimana. Mohon bantuannya, terima kasih

Berikut isi file jQuery.mycart.js nya (kodenya sangat panjang, maaf)

(function ($) {  "use strict";  var OptionManager = (function () {    var objToReturn = {};    var defaultOptions = {      classCartIcon: 'my-cart-icon',      classCartBadge: 'my-cart-badge',      classProductQuantity: 'my-product-quantity',      classProductRemove: 'my-product-remove',      classCheckoutCart: 'my-cart-checkout',      affixCartIcon: true,      showCheckoutModal: true,      clickOnAddToCart: function($addTocart) { },      clickOnCartIcon: function($cartIcon, products, totalPrice, totalQuantity) { },      checkoutCart: function(products, totalPrice, totalQuantity) { },      getDiscountPrice: function(products, totalPrice, totalQuantity) { return null; }    };    var getOptions = function (customOptions) {      var options = $.extend({}, defaultOptions);      if (typeof customOptions === 'object') {        $.extend(options, customOptions);      }      return options;    }    objToReturn.getOptions = getOptions;    return objToReturn;  }());  var ProductManager = (function(){    var objToReturn = {};    /*    PRIVATE    */    localStorage.products = localStorage.products ? localStorage.products : "";    var getIndexOfProduct = function(id){      var productIndex = -1;      var products = getAllProducts();      $.each(products, function(index, value){        if(value.id == id){          productIndex = index;          return;        }      });      return productIndex;    }    var setAllProducts = function(products){      localStorage.products = JSON.stringify(products);    }    var addProduct = function(id, name, summary, price, quantity, image) {      var products = getAllProducts();      products.push({        id: id,        name: name,        summary: summary,        price: price,        quantity: quantity,        image: image      });      setAllProducts(products);    }    /*    PUBLIC    */    var getAllProducts = function(){      try {        var products = JSON.parse(localStorage.products);        return products;      } catch (e) {        return [];      }    }    var updatePoduct = function(id, quantity) {      var productIndex = getIndexOfProduct(id);      if(productIndex < 0){        return false;      }      var products = getAllProducts();      products[productIndex].quantity = typeof quantity === "undefined" ? products[productIndex].quantity * 1 + 1 : quantity;      setAllProducts(products);      return true;    }    var setProduct = function(id, name, summary, price, quantity, image) {      if(typeof id === "undefined"){        console.error("id required")        return false;      }      if(typeof name === "undefined"){        console.error("name required")        return false;      }      if(typeof image === "undefined"){        console.error("image required")        return false;      }      if(!$.isNumeric(price)){        console.error("price is not a number")        return false;      }      if(!$.isNumeric(quantity)) {        console.error("quantity is not a number");        return false;      }      summary = typeof summary === "undefined" ? "" : summary;      if(!updatePoduct(id)){        addProduct(id, name, summary, price, quantity, image);      }    }    var clearProduct = function(){      setAllProducts([]);    }    var removeProduct = function(id){      var products = getAllProducts();      products = $.grep(products, function(value, index) {        return value.id != id;      });      setAllProducts(products);    }    var getTotalQuantity = function(){      var total = 0;      var products = getAllProducts();      $.each(products, function(index, value){        total += value.quantity * 1;      });      return total;    }    var getTotalPrice = function(){      var products = getAllProducts();      var total = 0;      $.each(products, function(index, value){        total += value.quantity * value.price;      });      return total;    }    objToReturn.getAllProducts = getAllProducts;    objToReturn.updatePoduct = updatePoduct;    objToReturn.setProduct = setProduct;    objToReturn.clearProduct = clearProduct;    objToReturn.removeProduct = removeProduct;    objToReturn.getTotalQuantity = getTotalQuantity;    objToReturn.getTotalPrice = getTotalPrice;    return objToReturn;  }());  var loadMyCartEvent = function(userOptions){    var options = OptionManager.getOptions(userOptions);    var $cartIcon = $("." + options.classCartIcon);    var $cartBadge = $("." + options.classCartBadge);    var classProductQuantity = options.classProductQuantity;    var classProductRemove = options.classProductRemove;    var classCheckoutCart = options.classCheckoutCart;    var idCartModal = 'my-cart-modal';    var idCartTable = 'my-cart-table';    var idGrandTotal = 'my-cart-grand-total';    var idEmptyCartMessage = 'my-cart-empty-message';    var idDiscountPrice = 'my-cart-discount-price';    var classProductTotal = 'my-product-total';    var classAffixMyCartIcon = 'my-cart-icon-affix';    $cartBadge.text(ProductManager.getTotalQuantity());    if(!$("#" + idCartModal).length) {      $('body').append(        '<div class="modal fade" id="' + idCartModal + '" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">' +        '<div class="modal-dialog" role="document">' +        '<div class="modal-content">' +        '<div class="modal-header">' +        '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>' +        '<h4 class="modal-title" id="myModalLabel"><span class="glyphicon glyphicon-shopping-cart"></span> My Cart</h4>' +        '</div>' +        '<div class="modal-body">' +        '<table class="table table-hover table-responsive" id="' + idCartTable + '"></table>' +        '</div>' +        '<div class="modal-footer">' +        '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>' +        '</div>' +        '</div>' +        '</div>' +        '</div>'      );    }    var drawTable = function(){      var $cartTable = $("#" + idCartTable);      $cartTable.empty();      var products = ProductManager.getAllProducts();      $.each(products, function(){        var total = this.quantity * this.price;        $cartTable.append(          '<tr title="' + this.summary + '" data-id="' + this.id + '" data-price="' + this.price + '">' +          '<td class="text-center" style="width: 30px;"><img width="30px" height="30px" src="' + this.image + '"/></td>' +          '<td>' + this.name + '</td>' +          '<td title="Unit Price">Rp. ' + this.price + '</td>' +          '<td title="Quantity"><input type="number" min="1" style="width: 70px;" class="' + classProductQuantity + '" value="' + this.quantity + '"/></td>' +          '<td title="Total" class="' + classProductTotal + '">Rp. ' + total + '</td>' +          '<td title="Remove from Cart" class="text-center" style="width: 30px;">X</td>' +          '</tr>'        );      });      $cartTable.append(products.length ?        '<tr>' +        '<td></td>' +        '<td><strong>Total</strong></td>' +        '<td></td>' +        '<td></td>' +        '<td><strong id="' + idGrandTotal + '">Rp. </strong></td>' +        '<td></td>' +        '</tr>'        : '<div class="alert alert-danger" role="alert" id="' + idEmptyCartMessage + '">Your cart is empty</div>'      );      var discountPrice = options.getDiscountPrice(products, ProductManager.getTotalPrice(), ProductManager.getTotalQuantity());      if(products.length && discountPrice !== null) {        $cartTable.append(          '<tr style="color: red">' +          '<td></td>' +          '<td><strong>Total (including discount)</strong></td>' +          '<td></td>' +          '<td></td>' +          '<td><strong id="' + idDiscountPrice + '">Rp. </strong></td>' +          '<td></td>' +          '</tr>'        );      }      showGrandTotal();      showDiscountPrice();    }    var showModal = function(){      drawTable();      $("#" + idCartModal).modal('show');    }    var updateCart = function(){      $.each($("." + classProductQuantity), function(){        var id = $(this).closest("tr").data("id");        ProductManager.updatePoduct(id, $(this).val());      });    }    var showGrandTotal = function(){      $("#" + idGrandTotal).text("Rp. " + ProductManager.getTotalPrice());    }    var showDiscountPrice = function(){      $("#" + idDiscountPrice).text("Rp. " + options.getDiscountPrice(ProductManager.getAllProducts(), ProductManager.getTotalPrice(), ProductManager.getTotalQuantity()));    }    /*    EVENT    */    if(options.affixCartIcon) {      var cartIconBottom = $cartIcon.offset().top * 1 + $cartIcon.css("height").match(/\d+/) * 1;      var cartIconPosition = $cartIcon.css('position');      $(window).scroll(function () {        if ($(window).scrollTop() >= cartIconBottom) {          $cartIcon.css('position', 'fixed').css('z-index', '999').addClass(classAffixMyCartIcon);        } else {          $cartIcon.css('position', cartIconPosition).css('background-color', 'inherit').removeClass(classAffixMyCartIcon);        }      });    }    $cartIcon.click(function(){      options.showCheckoutModal ? showModal() : options.clickOnCartIcon($cartIcon, ProductManager.getAllProducts(), ProductManager.getTotalPrice(), ProductManager.getTotalQuantity());    });    $(document).on("input", "." + classProductQuantity, function () {      var price = $(this).closest("tr").data("price");      var id = $(this).closest("tr").data("id");      var quantity = $(this).val();      $(this).parent("td").next("." + classProductTotal).text("Rp. " + price * quantity);      ProductManager.updatePoduct(id, quantity);      $cartBadge.text(ProductManager.getTotalQuantity());      showGrandTotal();      showDiscountPrice();    });    $(document).on('keypress', "." + classProductQuantity, function(evt){      if(evt.keyCode == 38 || evt.keyCode == 40){        return ;      }      evt.preventDefault();    });    $(document).on('click', "." + classProductRemove, function(){      var $tr = $(this).closest("tr");      var id = $tr.data("id");      $tr.hide(500, function(){        ProductManager.removeProduct(id);        drawTable();        $cartBadge.text(ProductManager.getTotalQuantity());      });    });    $("." + classCheckoutCart).click(function(){      var products = ProductManager.getAllProducts();      if(!products.length) {        $("#" + idEmptyCartMessage).fadeTo('fast', 0.5).fadeTo('fast', 1.0);        return ;      }      updateCart();      options.checkoutCart(ProductManager.getAllProducts(), ProductManager.getTotalPrice(), ProductManager.getTotalQuantity());      ProductManager.clearProduct();      $cartBadge.text(ProductManager.getTotalQuantity());      $("#" + idCartModal).modal("hide");    });  }  var MyCart = function (target, userOptions) {    /*    PRIVATE    */    var $target = $(target);    var options = OptionManager.getOptions(userOptions);    var $cartIcon = $("." + options.classCartIcon);    var $cartBadge = $("." + options.classCartBadge);    /*    EVENT    */    $target.click(function(){      options.clickOnAddToCart($target);      var id = $target.data('id');      var name = $target.data('name');      var summary = $target.data('summary');      var price = $target.data('price');      var quantity = $target.data('quantity');      var image = $target.data('image');      ProductManager.setProduct(id, name, summary, price, quantity, image);      $cartBadge.text(ProductManager.getTotalQuantity());    });  }  $.fn.myCart = function (userOptions) {    loadMyCartEvent(userOptions);    return $.each(this, function () {      new MyCart(this, userOptions);    });  }})(jQuery);
avatar Ahmad554
@Ahmad554

95 Kontribusi 39 Poin

Diperbarui 4 tahun yang lalu

Tanggapan

coba diedit dan dipsate ulang ya kodenya

Siap bang....

3 Jawaban:

<div>Bisa pakai <a href="https://numeraljs.com/">Numeral.js</a> atau <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat">Intl.NumberFormat</a>.<br><br></div><pre>new Intl.NumberFormat("id-ID", { style: "currency", currency: "IDR" }).format(123456.789); // hasil: Rp 123.456,79</pre><div><br>Contoh pakai Intl.NumberFormat di code-nya, ini hanya untuk view saja - value-nya tetap di-numberic.</div><pre>var drawTable = function() { var $cartTable = $("#" + idCartTable); $cartTable.empty(); var products = ProductManager.getAllProducts(); $.each(products, function() { var total = this.quantity * this.price; // $cartTable.append('&lt;tr title="' + this.summary + '" data-id="' + this.id + '" data-price="' + this.price + '"&gt;' + '&lt;td class="text-center" style="width: 30px;"&gt;&lt;img width="30px" height="30px" src="' + this.image + '"/&gt;&lt;/td&gt;' + '&lt;td&gt;' + this.name + '&lt;/td&gt;' + '&lt;td title="Unit Price"&gt;Rp. ' + this.price + '&lt;/td&gt;' + '&lt;td title="Quantity"&gt;&lt;input type="number" min="1" style="width: 70px;" class="' + classProductQuantity + '" value="' + this.quantity + '"/&gt;&lt;/td&gt;' + '&lt;td title="Total" class="' + classProductTotal + '"&gt;Rp. ' + total + '&lt;/td&gt;' + '&lt;td title="Remove from Cart" class="text-center" style="width: 30px;"&gt;X&lt;/td&gt;' + '&lt;/tr&gt;'); $cartTable.append('&lt;tr title="' + this.summary + '" data-id="' + this.id + '" data-price="' + new Intl.NumberFormat("id-ID", { style: "currency", currency: "IDR" }).format(this.price) + '"&gt;' + '&lt;td class="text-center" style="width: 30px;"&gt;&lt;img width="30px" height="30px" src="' + this.image + '"/&gt;&lt;/td&gt;' + '&lt;td&gt;' + this.name + '&lt;/td&gt;' + '&lt;td title="Unit Price"&gt;Rp. ' + this.price + '&lt;/td&gt;' + '&lt;td title="Quantity"&gt;&lt;input type="number" min="1" style="width: 70px;" class="' + classProductQuantity + '" value="' + this.quantity + '"/&gt;&lt;/td&gt;' + '&lt;td title="Total" class="' + classProductTotal + '"&gt;Rp. ' + total + '&lt;/td&gt;' + '&lt;td title="Remove from Cart" class="text-center" style="width: 30px;"&gt;X&lt;/td&gt;' + '&lt;/tr&gt;'); });</pre><div><br></div>

avatar soeleman
@soeleman

120 Kontribusi 147 Poin

Dipost 4 tahun yang lalu

<pre>// ES6 Javascript

const formatRupiah = (money) =&gt; { return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 } ).format(money); }</pre><div><br></div><pre>console.log(formatRupiah(15000));</pre><div><br>hasilnya : Rp 15.000</div>

avatar asruldev
@asruldev

17 Kontribusi 10 Poin

Dipost 4 tahun yang lalu

Tanggapan

<div>Makasih responnya teman2, akan sy coba semua :D</div>

avatar Ahmad554
@Ahmad554

95 Kontribusi 39 Poin

Dipost 4 tahun yang lalu

Login untuk ikut Jawaban