0

Tenho um select mostrando produtos que podem ser inseridos numa tabela clicando no botão + .

Anteriormente quando os valores eram apesentados no formato como está no banco de dados (9999.99) eu conseguia calcular o valor dos itens selecionados corretamente, mas quando passei a apresentar os valores no formato do Real (9.999,99) não consegui mais calcular o total dos produtos selecionados.

Estava aplicando uma conversão no cálculo dessa função:

function calculaTotal(){
  var total = 0;
  if ($(".iten-preco").length > 0){
    $(".iten-preco").each(function(){
      total += $(this).text();
    });
  }
  $('#total-orcamento').text(total);
}

Código completo:

function loadItens(){
	$.getJSON("https://api.myjson.com/bins/10hz22",function(data){
	  itens = data;
	  $.each(data, function(key, val){
	    $("#select-iten").append("<option value='"+key+"'>"+
	    val.nome+" ("+ toReal(val.preco) +")</option>");
	  });
	});
}

loadItens();

var itens;

$("#add-iten").click(function(){
  var si = $("#select-iten").val();
  $(".itens").append("<tr class='iten-added'>"+
    "<td>"+itens[si].id+"</td>"+
    "<td>"+itens[si].nome+"</td>"+
    "<td class='iten-preco'>"+ toReal(itens[si].preco) +"</td>"+
    "<td><button class='iten-delete btn btn-danger'>-</button></td>"+
  "</tr>");
  calculaTotal();
});

$(document).on("click", ".iten-delete", function(){
  $(this).parents("tr").remove();
  calculaTotal();
});

function calculaTotal(){
  var total = 0;
  if ($(".iten-preco").length > 0){
    $(".iten-preco").each(function(){
      total += $(this).text();
    });
  }
  $('#total-orcamento').text(total);
}

function toReal(str){
  str = parseFloat(str).toLocaleString('pt-br',{minimumFractionDigits: 2});
  return str;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
  <label for="select-iten">Produtos: </label>
  <select id="select-iten" class="form-control">
    <option>Selecione</option>
  </select>
  <input class="btn btn-primary" type="button" id="add-iten"  value="+"> 
</form>

<div class="table-responsive">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>#</th>
        <th>Nome</th>
        <th>Preço</th>
        <th>Ação</th>
      </tr>
    </thead>
    <tbody class="itens">
    </tbody>
    <tfoot>
      <tr>
        <td colspan="2">Total: </td>
        <td colspan="2" id="total-orcamento"></td>
      </tr>
    </tfoot>
  </table>
</div>

2
  • Se você alterar total += $(this).text(), para total += $(this).text().replace('.','').replace(',','.') não resolve o seu problema? Commented 20/03/2019 às 15:02
  • Teve que converter para float também! Commented 20/03/2019 às 16:05

2 Respostas 2

2

Você tem dois erros na função calculaTotal:

01. Levando em conta que você usa uma vírgula para separar as casas decimais, o JavaScript não entende que se trata de um número decimal. Desse modo, você deve fazer uma conversão para float após substituir a vírgula por um ponto.

Para realizar a conversão, você pode fazer algo assim:

function toFloat(num) {
  return parseFloat(num.replace(/\./g, '').replace(/,/g, '.'))
}

console.log(toFloat('987.654,321'))

02. Você está fazendo uma concatenação de strings ao usar o operador += sem usar números em ambos os operandos. No entanto, esse problema já é resolvido pelo tópico anterior.

Um exemplo da concatenação não desejada que você está fazendo:

let initialValue = 0

initialValue += '3'
initialValue += '5'

console.log(initialValue, typeof initialValue)


Então:

function calculaTotal() {
  var total = 0

  if ($('.iten-preco').length > 0) {
    $('.iten-preco').each(function() {
      total += parseFloat($(this).text().replace(/\./g, '').replace(/,/g, '.'))
    })
  }
  $('#total-orcamento').text(total)
}
3
  • Com esse replace você só substitui a primeira ocorrência do caractere "."
    – Andre
    Commented 20/03/2019 às 15:16
  • É verdade! Obrigado pela observação. Nesse caso, expressões regulares como /\./g são mais convenientes... Vou editar a resposta! :) Commented 20/03/2019 às 15:32
  • Resolveu, obrigado. Commented 20/03/2019 às 15:56
2

Converta para float:

    function calculaTotal() {
     var total = 0;
     if ($(".iten-preco").length > 0) {
       $(".iten-preco").each(function(){
         total += parseFloat($(this).text().replace(/\./g, 
       '').replace(/,/g, '.'));
       });
     }
     $('#total-orcamento').text(total);
    }

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .