object value not adding to the array

Question

I have developed a calculator app in LWC and every functionality works properly other than the array.

HTML

<template>
    <lightning-card title="Calculator">    
    <lightning-layout multiple-rows>
     <lightning-layout-item size="12" padding="around-medium">
         <lightning-input data-inputname="FirstNum" type="number" value={result.firstNumber} onchange={numberHandler}>
         </lightning-input>         
     </lightning-layout-item>
     <lightning-layout-item size="12" padding="around-medium" >
        <lightning-input  data-inputname="SecondNum" value={result.secondNumber} type="number" onchange={numberHandler}>
        </lightning-input>
    </lightning-layout-item>
    <!--button-->
    <lightning-layout-item size="12" padding="around-medium">
        <lightning-button-group>
        <lightning-button label="Add" icon-name="utility:add" onclick={add}></lightning-button><br/>
        <lightning-button label="Sub" icon-name="utility:dash" onclick={sub}></lightning-button><br/>
        <lightning-button label="Multiply" icon-name="utility:close" onclick={multi}></lightning-button><br/>
        <lightning-button label="Divide" icon-name="utility:magicwand" onclick={divi}></lightning-button><br/>
    </lightning-button-group>
    </lightning-layout-item>
  <!--output-->
  <div style="color:blue; font-size:larger ">
  <lightning-layout-item size="12" padding="around-medium" >
    <lightning-formatted-text data-inputname="Output" value={result.outputText} ></lightning-formatted-text>
</lightning-layout-item>

</div>

<!--checkbox-->
<lightning-layout-item size="12" padding="around-medium" >
    <lightning-input type="checkbox" label="Show Previous values" onchange={prevValue}></lightning-input>
</lightning-layout-item>
<template if:true={previousValue}>
   
    <template for:each={results} for:item="r">
        <lightning-formatted-text key={r.id} value={r.Output}></lightning-formatted-text>
    </template>
    </template>
</lightning-layout>
</lightning-card>    
</template>

js

import { LightningElement,track } from 'lwc';

export default class Calculator extends LightningElement {

    @track outputText;
    
    @track results =[];
    @track result = {};
    
    @track previousValue = false;

    numberHandler(event){
        const inputBox = event.target.dataset.inputname;
        if(inputBox === 'FirstNum')
        {
            this.result.firstNumber = event.target.value;
            console.log(this.result.firstNumber);
        }
        else if(inputBox === 'SecondNum')
        {
            this.result.secondNumber = event.target.value;
            console.log(this.result.secondNumber);
        }
    }
    
    add()
    {
       const firstN = parseInt(this.result.firstNumber);
       const secondN = parseInt(this.result.secondNumber);

       console.log(firstN); 
       console.log(secondN);

        this.result.outputText = `Result of ${firstN} + ${secondN} is ${firstN + secondN}`;
        console.log(this.result.outputText);

        this.results.push({
            FirstNum : this.result.firstNumber,
            secondNum : this.result.secondNumber,
             Output : this.result.outputText

        });
        
        console.log('THe value has been pushed');
    }

    sub()
    {
        const firstN = parseInt(this.result.firstNumber);
        const secondN = parseInt(this.result.secondNumber);
 
        console.log(firstN); 
        console.log(secondN);
 
         this.result.outputText = `Result of ${firstN} - ${secondN} is ${firstN - secondN}`;
         console.log(this.result.outputText);
 
         this.results.push({
             FirstNum : this.result.firstNumber,
             secondNum : this.result.secondNumber,
              Output : this.result.outputText
 
         });
    }

    multi()
    {
       const firstN = parseInt(this.result.firstNumber);
       const secondN = parseInt(this.result.secondNumber);

       console.log(firstN); 
       console.log(secondN);

        this.result.outputText = `Result of ${firstN} * ${secondN} is ${firstN * secondN}`;
        console.log(this.result.outputText);

        this.results.push({
            FirstNum : this.result.firstNumber,
            secondNum : this.result.secondNumber,
             Output : this.result.outputText       
        });     

        
    }

    divi()
    {
        const firstN = parseInt(this.result.firstNumber);
        const secondN = parseInt(this.result.secondNumber);
 
        console.log(firstN); 
        console.log(secondN);
 
         this.result.outputText = `Result of ${firstN} / ${secondN} is ${firstN / secondN}`;
         console.log(this.result.outputText);
 
         this.results.push({
             FirstNum : this.result.firstNumber,
             secondNum : this.result.secondNumber,
              Output : this.result.outputText
 
         });
    }
    prevValue(event)
    {
        this.previousValue = event.target.checked;
    }
}

When the 'Show Previous values' is checked it displays empty. Can anyone spot my mistake here?

sfdcfox · Accepted Answer · 2021-10-20 12:59:05Z

You specified key={r.id}, but you didn't actually assign a unique id value, so it would cause errors. I've cleaned up your code and fixed the problem.

The (a,b) => a + b syntax is an arrow function. We will pass this function in as a parameter to call the code dynamically. This eliminates much of the duplicated code.

import { LightningElement,track } from 'lwc';

export default class Calculator extends LightningElement {

    @track outputText;
    
    @track results =[];
    @track result = {};
    
    @track previousValue = false;

    // We'll use a simple number as the id
    _lastId = 1;

    numberHandler(event){
        const inputBox = event.target.dataset.inputname;
        const fieldMap = { FirstNum: 'firstNumber', SecondNum: 'secondNumber'};
        console.log(inputBox, this.result[fieldMap[inputBox]] = event.target.value);
    }
    updateState(op, val) {
        const FirstNum = parseInt(this.result.firstNumber);
        const secondNum = parseInt(this.result.secondNumber);
        // increment the last id value
        const id = this._lastId++;
        const Output = this.result.outputText = `Result of ${FirstNum} ${op} ${secondNum} is ${val(FirstNum, secondNum)}`;
        console.log(FirstNum); 
        console.log(secondNum);

        console.log(this.result.outputText);
        // object shorthand notation makes it easier to read
        this.results.push({ id, FirstNum, secondNum, Output });
        console.log('The value has been pushed'); 
    }    
    add() {
        // We use arrow functions to calculate the value in our common method
        this.updateState('+', (a,b) => a + b);
    }
    sub() {
        this.updateState('-', (a,b) => a - b);
    }
    multi() {
        this.updateState('*', (a,b) => a + b);
    }
    divi() {
        this.updateState('/', (a,b) => a / b);
    }
    prevValue(event) {
        this.previousValue = event.target.checked;
    }
}

Demo.

This code works! Thank you

Sumo sales
– Sumo sales

2021-10-20 15:49:00 +00:00
Commented Oct 20, 2021 at 15:49 — Sumo sales
– Sumo sales, Commented Oct 20, 2021 at 15:49

Stack Exchange Network

object value not adding to the array

1 Answer 1

You must log in to answer this question.

Hot Network Questions

object value not adding to the array

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions