LWC JavaScript – Push New Values to Object Array for Lightning Web Components

I just want to push new values to existing object arrays I pull using Apex but when I compile and run what I have below it simply doesn't work. This sounds like a very basic problem but I can't seem to figure it out.

I simply need to pass these new objects/values

isAmount

isPercent

for each of my array list. These new values will be used later on conditional DOM rendering.

Please see a snippet of my code below:

JS

    getAccounts({ opptyId : this.recordId})
    .then(result => {
          this.record = result;
          for(let i = 0; i < this.record.length; i++) {

              if(this.record[i].DiscountType__c === 'Percent'){
                  this.record[i].push({isPercent : true, isAmount : false}); // Doesn't work ...
              }
              if(this.record[i].DiscountType__c === 'Amount'){
                  this.record[i].push({isAmount : true, isPercent : false}); // Doesn't work ...
              }

              this.myList = this.record;
              this.error = undefined;
          })
    .catch(error => {
          this.error = error;
          this.record = undefined;
    });
    }

I've also tried the following, but to no avail.

this.record.push({isPercent : true, isAmount : false}); // Just creates a new line of array

this.record.push({Id: this.record[i].Id, isPercent : true, isAmount : false}); // Creates a new line of array but with the same Id from an existing one

How do I correctly do this – and is there a better way?

I would appreciate help and suggestions on this. Thanks in advance!

Best Answer

What you're looking for is not push, but map:

this.record = result;
this.myList = this.record.map(row => ({
  ...row,
  isPercent: row.DiscountType__c==='Percent',
  isAmount: row.DiscountType__c==='Amount'
}));

This transforms the row by appending two new attributes.

The ... operator copies all the existing properties, while the other two lines add two new calculated properties.

Related Solutions

Lightning Aura Components – Bug in Lightning Framework Using aura:renderIf

This is a known issue in the Framework.

We do plan to fix it, but there is a workaround and so it's not #1 on our plate over things like Performance.

Short Story

<aura:renderIf isTrue="{!v.testingArray.length > 0}">
        <SPAN>
        <aura:iteration items="{!v.testingArray}" var="opp">
            {!opp.name} <br/>
        </aura:iteration>
        </SPAN>
        <aura:set attribute="else">
            Array empty
        </aura:set>
    </aura:renderIf>

Long Story

The issue here is that some components like aura:renderIf and aura:iteration may not actually render anything. But you can come along later, change a condition and then they render.

To know where to render when it comes time to do so, we add a comment into the page. Then when we have some output, we replace the comment with the output.

But when you get a component like iteration which uses a comment, inside another component that uses a comment the framework gets confused. We replace the comment with the content of the iteration, but then renderIf loses its marker comment and you've hit the error.

Wrapping the iteration in a span causes iteration and renderIf not to share markers and things start working again.

Something we plan to fix, but the marker system is so complex we have to be careful not to break other things.

LWC – How to Convert CSV File to Array of JS Objects

You're adding a handler to the input element to fire when a change occurs, but you've already selected the file and clicked the import button. So, it would wait until the next change before that happens. Instead, just go ahead and read the files.

Here's a simple demonstration:

import { LightningElement, track, api } from 'lwc';

export default class App extends LightningElement {
    readFiles() {
        [...this.template
            .querySelector('input[type="file"]')
            .files].forEach(async file => {
                try {
                    const result = await this.load(file);
                    // Process the CSV here
                    console.log(result);
                } catch(e) {
                    // handle file load exception
                }
            });
    }
    async load(file) {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.onload = function() {
                resolve(reader.result);
            };
            reader.onerror = function() {
                reject(reader.error);
            };
            reader.readAsText(file);
        });
    }
}

<template>
    <input type="file" multiple accept=".csv"/>
    <button onclick={readFiles}>Import</button>
</template>

Related Topic

Lightning Web Component – How to Push URLs to an Array