0

I was attempting to make a lwc table, but facing some issues with creating a new table row dynamically with a "Add new row" button. My problem is that even after many tries, I am unable to set the record Id for the new row. Clicking on new row makes both the old record and the new record id as same. Screenshot below for clarity. For this I was unable to use filter/splice/slice to delete too. Here's what I tried:

<lightning-button type="submit"
                    name="Add New Row"
                    label="Add New Row"
                    variant = "brand"
                    onclick={addRow} >
                    </lightning-button> 

Function is:

  addRow() {
  console.log('this.tableData.records1: '+JSON.stringify(this.tableData.records));
  var oldRecord= this.tableData.records[this.tableData.records.length-1];
  var newRecord = oldRecord;
  newRecord.recId = parseInt(oldRecord.recId) + 1;
  this.tableData.records.concat(newRecord);
  console.log('oldRecord: '+oldRecord.recId);
  console.log('newRecord: '+newRecord.recId);
  console.log('this.tableData.records2: '+JSON.stringify(this.tableData.records));     
}

Following console:

    this.tableData.records1: 
    [{
        "fieldList": [{
            "fieldId": "0:abc__c",
            "isMandatory": true,
            "name": "abc__c",
            "recordId": 0,
            "type": "STRING"
        }, {
            "fieldId": "0:Type__c",
            "isMandatory": true,
            "name": "Type__c",
            "recordId": 0,
            "type": "STRING"
        }, {
            "fieldId": "0:xyz__c",
            "isMandatory": true,
            "name": "xyz__c",
            "recordId": 0,
            "type": "STRING"
        }, {
            "fieldId": "0:Location__c",
            "isMandatory": true,
            "name": "Location__c",
            "recordId": 0,
            "type": "STRING"
        }, {
            "fieldId": "0:score__c",
            "isMandatory": true,
            "name": "score__c",
            "recordId": 0,
            "type": "PERCENT"
        }],
        "recordId": 0
    }]

Also

  lastRecord: 1
  newRecord: 1 (Should have been 1 more than lastRecord)

And finally the last log:

    this.tableData.records2: [{
        "fieldList": [{
            "fieldId": "0:abc__c",
            "isMandatory": true,
            "name": "abc__c",
            "recId": 0,
            "type": "STRING"
        }, {
            "fieldId": "0:Type__c",
            "isMandatory": true,
            "name": "Type__c",
            "recId": 0,
            "type": "STRING"
        }, {
            "fieldId": "0:xyz__c",
            "isMandatory": true,
            "name": "Name__c",
            "recId": 0,
            "type": "STRING"
        }, {
            "fieldId": "0:Location__c",
            "isMandatory": true,
            "name": "Location__c",
            "recId": 0,
            "type": "STRING"
        }, {
            "fieldId": "0:score__c",
            "isMandatory": true,
            "name": "score__c",
            "recId": 0,
            "type": "PERCENT"
        }],
        "recId": 1
    }]

Remove code (not working):

    removeRow(event) {
      console.log('remove clicked');
      if (this.tableData.records.length >= 2) {
          this.tableData.records.slice(event.target.accessKey);
      }
    }

Any help would be much appreciated.enter image description here

1 Answer 1

3

Your problem is this line here:

var newRecord = oldRecord;

You're passing the reference of oldRecord to newRecord, making newRecord effectively an alias to oldRecord; updating either variable will update the same underlying object. To fix this, you would want to copy the object, instead:

var newRecord = {...oldRecord};

This copies all the values, but makes a new object from the old one. They will be independent copies that you can now manipulate without affecting the other.

3
  • Thanks Brian! I will try this out..
    – MnZ
    Mar 13, 2021 at 5:48
  • I tried the above method and was not able to complete the add feature. Instead -----------> var newRecord = Object.assign({}, lastRecord); worked for me. I will mark this as an answer because oldRecord did get cloned to newRecord when I checked the logs. It was probably an error from my end.
    – MnZ
    Mar 14, 2021 at 12:59
  • @MnZ I thought it was an array. For an object, {...oldRecord} would work.
    – sfdcfox
    Mar 14, 2021 at 13:32

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .