Format currency in jQuery

Question

I have the following HTML

<table id="products_stock" class="table">
    <thead >
        <tr>
            <th class="active">Produto</th>
            <th class="active">Categoria</th>
            <th class="active">Subcategoria</th>
            <th class="active">Fornecedor</th>
            <th class="active">Estoque</th>
            <th class="active">Unitário</th>
            <th class="active">Quantidade</th>
            <th class="active">Total</th>
            <th class="active">#</th>
        </tr>
    </thead>
    <tbody>
        <?php foreach($products as $value){ ?>
        <tr>
            <td><?php echo $value->product_name; ?></td>
            <td><?php echo $value->category_name; ?></td>
            <td><?php echo $value->subcategory_name; ?></td>
            <td>
                <select class="form-control supplier" name="supplier" id="supplier[]" data-product_id="<?php echo $value->product_id; ?>">
                    <option value="0">Selecione um fornecedor</option>
                    <?php foreach($value->suppliers as $v_supplier){ ?>
                    <option value="<?php echo $v_supplier->supplier_id; ?>"><?php echo $v_supplier->supplier_name; ?></option>
                    <?php } ?>
                </select>
            </td>
            <td style="width: 15%" class="stock_qty_<?php echo $value->product_id; ?>">-</td>
            <td style="width: 10%" class="stock_unity_<?php echo $value->product_id; ?>">-</td>
            <td style="width: 10%"><input type="text" class="form-control" value="0"></td>
            <td style="width: 10%" class="stock_total_<?php echo $value->product_id; ?>">-</td>
            <td style="width: 5%"><i class="fa fa-shopping-cart btn-primary btn"></i></td>
        </tr>
        <?php } ?>
    </tbody>
</table> 

I have the following function in jQuery:

$(".supplier").change(function(){
    var supplier = $(this).val();
    var product_id = $(this).attr('data-product_id');
    $.ajax({
        type: "POST", 
        data: {supplier:supplier, product_id:product_id},
        url: BASE_URL + "order/supplier_check",
        success: function(data) {
            if(data=='0'){
                $(".stock_qty_"+product_id).html("<font color='red'>Sem Estoque</font>");
                $(".stock_unity_"+product_id).html("<font color='red'>0</font>");
                $(".stock_total_"+product_id).html("<font color='red'>0</font>");
            } else {
                var result = jQuery.parseJSON(data);
                $(".stock_qty_"+product_id).html(result.product_stock_qty);
                $(".stock_unity_"+product_id).html(result.media_price);
                $(".stock_total_"+product_id).html(result.total_price);
            }
        }
    });
})

Even then, it works perfectly... recovers the values, and puts it on the screen. The problem is the following... the value returned via jQuery (real value) is example: 11.31, I need to turn these 11.36 to R $ 11,31.

I’ve tried several masks and it didn’t work. How can I do this that has the effect I need?

Below the result print:

Answer 1

You can use the method .toLocaleString to convert the number into a local currency format. In Real (R$) would be:

parseFloat(result.media_price).toLocaleString("pt-BR", { style: "currency" , currency:"BRL"});

You can even do a function that does the conversion:

var valor = "11.31";
function formata(v){
   return parseFloat(v).toLocaleString("pt-BR", { style: "currency" , currency:"BRL"});
}

document.write(formata(valor));

The value must be a number and not a string, so the use of parseFloat().

Documentation of . toLocaleString

In your case, using the function, would be:

$(".stock_unity_"+product_id).html(formata(result.media_price));
$(".stock_total_"+product_id).html(formata(result.total_price));