1

Im missing something obvious while trying to add an index property to an array. Can anyone point to why this would be happening? Im gonna cringe when someone points this out, I just know it but Im stuck!

At render I get with this LWC component's @wire target property or method threw an error during value provisioning. Original error: [Cannot read properties of undefined (reading 'settingsWrapper')]

export default class Foo extends LightningElement {
    
    settingsWrapper;
    
    @wire (getEpiStatusSettings) 
    settings({ error, data}){
        if(data){
            this.settingsWrapper = [];
            data.forEach(function(elem,i){
                var clone = Object.assign({}, elem); // this should give me an extensible object
                clone.index = i; // want to drop index in here for use later
                this.settingsWrapper.push(clone); // seems I cant push to an undefined object?
            });
        }
        
    };
}  

Any pointers would be most appreciated!

2 Answers 2

3

Consider using arrow function => instead of function itself.

In regular functions the this keyword represented the object (function, object and function are the same in js) that called the function.

With arrow functions the this keyword always represents the object that defined the arrow function:

export default class Foo extends LightningElement {
    
    settingsWrapper;
    
    @wire (getEpiStatusSettings) 
    settings({ error, data}){
        if(data){
            this.settingsWrapper = [];
            data.forEach((elem,i) => {
                var clone = Object.assign({}, elem); // this should give me an extensible object
                clone.index = i; // want to drop index in here for use later
                this.settingsWrapper.push(clone); // seems I cant push to an undefined object?
            });
        }
        
    };
}

There is a good trailhead module Understand JavaScript Functions related to this topic.


by the way, also consider using map instead of forEach

export default class Foo extends LightningElement {
    
    settingsWrapper;
    
    @wire (getEpiStatusSettings) 
    settings({ error, data}){
        if(data){
            this.settingsWrapper = data.map((elem,index) => ({...elem, index}));
        }   
    };
}
5
  • Thanks so much for this help! The first revised approach using fat arrow worked; I took your advice on the trail however the second map approach - which looks more elegant - failed due to object is not extensible error. I thought map created a clone but seems not to be the case. Nov 11, 2021 at 21:58
  • @CloudHugger The latter example could have been written as data.map((elem,index) => ({...elem, index})) where ...x is the same as Object.assign({}, x).
    – sfdcfox
    Nov 12, 2021 at 1:39
  • Ah geez @sfdcfox - now my brain has just exploded. Will go learn some more javascript! I totally dont see how that works lol Nov 12, 2021 at 5:59
  • @CloudHugger LWC's JavaScript uses many of the most advanced features to have hit JS in the past few years. It's far more capable than what I "grew up on". Here's some links. Spread syntax, Object initializer, Grouping Operator.
    – sfdcfox
    Nov 12, 2021 at 6:13
  • Many thanks - I'll get into those links. Going to be like teaching an old dog new tricks... :P Nov 12, 2021 at 6:59
0

Check that the value of this at this.settingsWrapper = []; and this.settingsWrapper.push(clone); are same

3
  • Thanks for suggestion! What you're seeing there is the complete controller... so Im going to say 'I assume they are the same'? Is there something there that you've noticed? Nov 11, 2021 at 8:40
  • I can see where you're going with this answer, but could you elaborate on why CloudHugger should check what this is referring to and point to how the reference can be different depending on the context in JavaScript?
    – nbrown
    Nov 11, 2021 at 15:55
  • The fat arrow answer got me over the line on scope of 'this' within the function depending on whether is a regular function or arrow function. Nov 11, 2021 at 23:42

You must log in to answer this question.

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