Formatting currency in jQuery

0

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);
            }
        }
    });
})
So far, it works perfectly ... it retrieves the values, and puts it on the screen. The problem is as follows ... the value returned via jQuery (value in reais) is ex: 11.31, I need to turn these 11.36 into $ 11.31.

I have tried several masks and it did not work. How can I do this that has the effect I need?

Below the output print:

    
asked by anonymous 08.12.2018 / 18:47

1 answer

3

You can use the .toLocaleString method to convert the number to 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 use parseFloat() .

.toLocaleString documentation

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));
    
08.12.2018 / 19:25