Skip to content
Advertisement

Add total value according to chapter

I return a dynamic form where the products are separated by chapters. In the example I put there are 3 different chapters. At the end of each chapter, I intend to create an input with the total value of each chapter.

I’m doing it this way:

var data = [
   {Designacao: "Micro-ondas1", NumCap:  "1", Capitulo: "Cozinha", NumSub: "1.1", Valor: "300", },
   {Designacao: "Exaustor cinzento 1", NumCap: "", Capitulo: "", NumSub: "1.2",  Valor: "75.00", },
   {Designacao: "Mesa - Castanha -8 Lugares", NumCap: "2", Capitulo: "Sala", NumSub: "2.1",  Valor: "741.00" },
   {Designacao: "Castanhas douradas",  NumCap: "", Capitulo: "", NumSub: "2.2",  Valor: "150.00", },
   {Designacao: "cama", NumCap: "3", Capitulo: "Quarto", NumSub: "3.1",  Valor: "485.00", },
   {Designacao: "Guarda Vestidos", NumCap: "", Capitulo: "", NumSub: "3.2",  Valor: "685.00", },
];

var linha = ``;
var soma = 0;
Object.keys(data).forEach(i=>{

Designacao = data[i].Designacao;
NumCap = data[i].NumCap;
Capitulo = data[i].Capitulo;
NumSub = data[i].NumSub;
Valor = data[i].Valor;
teste = parseInt(Valor);

if( NumCap > 0){
   soma += teste;
}

if(NumCap > 1){

linha += `<div class="form-group col-md-1" style="float: right;">  
          <input type="text" class="form-control1 alinha" value="${soma}">
          <span class="form-highlight">€</span>
          <span class="form-bar"></span>
          <label class="label3 logo8" for="Valor">Total</label>        
          </div>
          <div style="clear:both;"></div>`;
}

if(!NumCap.length||!Capitulo.length){

linha += `<div class="form-group col-md-2" style="display: none;">                      
          <input type="text" class="form-control1 alinha" value="${NumCap}">
          <span class="form-highlight"></span> 
          <span class="form-bar"></span>
          <label class="label3 logo8" for="Capitulo">Nº Capitulo</label>        
          </div>
          <div class="form-group col-md-4" style="display: none;">                      
          <input type="text" class="form-control1" value="${Capitulo}">
          <span class="form-highlight"></span> 
          <span class="form-bar"></span>  
          <label class="label1 logo8" for="Capitulo">Capitulo</label>        
          </div>
          <div style="clear:both;"></div>`;
}else{
linha += `<div class="form-group col-md-2">   
          <input type="text" class="form-control1 alinha" value="${NumCap}">
          <span class="form-highlight"></span>
          <span class="form-bar"></span>
          <label class="label3 logo8" for="Capitulo">Nº Capitulo</label>        
          </div>
          <div class="form-group col-md-4"> 
          <input type="text" class="form-control1" value="${Capitulo}">
          <span class="form-highlight"></span> 
          <span class="form-bar"></span> 
          <label class="label1 logo8" for="Capitulo">Capitulo</label>        
          </div>
          <div style="clear:both;"></div>`;
}

linha += `<div class="form-group col-md-1">
          <input type="text" class="form-control1 alinha" value="${NumSub}">
          <span class="form-highlight"></span> 
          <span class="form-bar"></span> 
          <label class="label3 logo8" for="Capitulo1">Nº</label>        
          </div>
          <div class="form-group col-md-4">  
          <textarea class="area2" rows="1" data-min-rows="1">${Designacao}</textarea>
          <span class="form-highlight"></span>
          <span class="form-bar"></span> 
          <label class="label1 logo8" for="Designaca">Designação</label>
          </div>
          <div class="form-group col-md-1">  
          <input type="text" class="form-control1 alinha" value="${Valor}">
          <span class="form-highlight">€</span>
          <span class="form-bar"></span>
          <label class="label3 logo8" for="Valor">Total</label>        
          </div>
          <div style="clear:both;"></div>`;
}) 

linha += `<div class="form-group col-md-1" style="float: right;">  
          <input type="text" class="form-control1 alinha" value="${soma}">
          <span class="form-highlight">€</span>
          <span class="form-bar"></span>
          <label class="label3 logo8" for="Valor">Total</label>        
          </div>
          <div style="clear:both;"></div>`;

$("#retorc6").html(linha);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form role="form" action="#!" id="retorc6">
</form>

The problem is that the total value of each chapter is being returned incorrectly. In chapter 1 the total value must be 375.00, in chapter 2 of 891.00 and in chapter 3 of 1170.00.

I’m not able to create the correct condition to return the values ​​as I want, can someone help to solve the problem?

The idea is to create, at the end of each chapter, the total value of the products in that same chapter.

Advertisement

Answer

I just moved the soma += teste to the end, and added a check to reset it after every ‘chapter’.

The code below should work.

var data = [
   {Designacao: "Micro-ondas1", NumCap:  "1", Capitulo: "Cozinha", NumSub: "1.1", Valor: "300", },
   {Designacao: "Exaustor cinzento 1", NumCap: "", Capitulo: "", NumSub: "1.2",  Valor: "75.00", },
   {Designacao: "Mesa - Castanha -8 Lugares", NumCap: "2", Capitulo: "Sala", NumSub: "2.1",  Valor: "741.00" },
   {Designacao: "Castanhas douradas",  NumCap: "", Capitulo: "", NumSub: "2.2",  Valor: "150.00", },
   {Designacao: "cama", NumCap: "3", Capitulo: "Quarto", NumSub: "3.1",  Valor: "485.00", },
   {Designacao: "Guarda Vestidos", NumCap: "", Capitulo: "", NumSub: "3.2",  Valor: "685.00", },
];

var linha = ``;
var soma = 0;
Object.keys(data).forEach(i=>{

Designacao = data[i].Designacao;
NumCap = data[i].NumCap;
Capitulo = data[i].Capitulo;
NumSub = data[i].NumSub;
Valor = data[i].Valor;
teste = parseInt(Valor);


if(NumCap > 1){

  linha += `<div class="form-group col-md-1" style="float: right;">  
            <input type="text" class="form-control1 alinha" value="${soma}">
            <span class="form-highlight">€</span>
            <span class="form-bar"></span>
            <label class="label3 logo8" for="Valor">Total</label>        
            </div>
            <div style="clear:both;"></div>`;
  }

if(!NumCap.length||!Capitulo.length){

linha += `<div class="form-group col-md-2" style="display: none;">                      
          <input type="text" class="form-control1 alinha" value="${NumCap}">
          <span class="form-highlight"></span> 
          <span class="form-bar"></span>
          <label class="label3 logo8" for="Capitulo">Nº Capitulo</label>        
          </div>
          <div class="form-group col-md-4" style="display: none;">                      
          <input type="text" class="form-control1" value="${Capitulo}">
          <span class="form-highlight"></span> 
          <span class="form-bar"></span>  
          <label class="label1 logo8" for="Capitulo">Capitulo</label>        
          </div>
          <div style="clear:both;"></div>`;
}else{
linha += `<div class="form-group col-md-2">   
          <input type="text" class="form-control1 alinha" value="${NumCap}">
          <span class="form-highlight"></span>
          <span class="form-bar"></span>
          <label class="label3 logo8" for="Capitulo">Nº Capitulo</label>        
          </div>
          <div class="form-group col-md-4"> 
          <input type="text" class="form-control1" value="${Capitulo}">
          <span class="form-highlight"></span> 
          <span class="form-bar"></span> 
          <label class="label1 logo8" for="Capitulo">Capitulo</label>        
          </div>
          <div style="clear:both;"></div>`;
}

linha += `<div class="form-group col-md-1">
          <input type="text" class="form-control1 alinha" value="${NumSub}">
          <span class="form-highlight"></span> 
          <span class="form-bar"></span> 
          <label class="label3 logo8" for="Capitulo1">Nº</label>        
          </div>
          <div class="form-group col-md-4">  
          <textarea class="area2" rows="1" data-min-rows="1">${Designacao}</textarea>
          <span class="form-highlight"></span>
          <span class="form-bar"></span> 
          <label class="label1 logo8" for="Designaca">Designação</label>
          </div>
          <div class="form-group col-md-1">  
          <input type="text" class="form-control1 alinha" value="${Valor}">
          <span class="form-highlight">€</span>
          <span class="form-bar"></span>
          <label class="label3 logo8" for="Valor">Total</label>        
          </div>
          <div style="clear:both;"></div>`;

if (NumCap !== '') soma = 0;
soma += teste;
})

linha += `<div class="form-group col-md-1" style="float: right;">  
          <input type="text" class="form-control1 alinha" value="${soma}">
          <span class="form-highlight">€</span>
          <span class="form-bar"></span>
          <label class="label3 logo8" for="Valor">Total</label>        
          </div>
          <div style="clear:both;"></div>`;
          

$("#retorc6").html(linha);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form role="form" action="#!" id="retorc6">
</form>
User contributions licensed under: CC BY-SA
10 People found this is helpful
Advertisement