Object Property Visible But Undefined

Question

In an aura component, I'm passing a list of records of a custom object from the server to a helper function. Now as a JS array of objects, I attempt to add a new property to each object and assign its value depending on whether one field in the original record was populated or another. Whichever was populated will be the new property's value. This is eventually for a datatable column.

The problem is that one of those fields that I check gets considered undefined, even though the field is there and has a value when I log the object. Even stranger:

• When I log the entire object, the field is there with a value.
• When I log the field itself, it's undefined.
• When I loop through the objects keys (all the fields) and log key and value, the field appears and has a value!

Here's the code:

refreshPrereqTable : function(component, event, helper, prereqList) {            

    prereqList.forEach(prereq => {
        console.log('prereq: '+JSON.stringify(prereq));
        console.log('prereq.Other_Academic_Institution__c: '+prereq.Other_Academic_Institution__c);
        if(prereq.Academic_Institution__c) prereq.AcademicInstitution = prereq.Academic_Institution__r.Name;
        //if(prereq.Other_Academic_Institution__c) prereq.AcademicInstitution = prereq.Other_Academic_Institution__c;
        Object.keys(prereq).forEach(field => {
            console.log(field+': '+prereq[field]);
            if(field == 'Other_Academic_Institution__c') prereq.AcademicInstitution = prereq[field];
        });
        console.log('prereq: '+JSON.stringify(prereq));
    });
}

I only attempted to further loop through the fields to see what would result.

Here are the logs:

prereq: {"Other_Academic_institution__c":"Best School","Degree_Level__c":"Professional","Id":"a034P00000YKCebQAH","Name":"0000064","RecordTypeId":"0124P000000bfvpQAA","Application__c":"a004P00000xaBQKQA2"}

prereq.Other_Academic_Institution__c: undefined

Other_Academic_institution__c: Best School

Degree_Level__c: Professional

Id: a034P00000YKCebQAH

Name: 0000064

RecordTypeId: 0124P000000bfvpQAA

Application__c: a004P00000xaBQKQA2

prereq: {"Other_Academic_institution__c":"Best School","Degree_Level__c":"Professional","Id":"a034P00000YKCebQAH","Name":"0000064","RecordTypeId":"0124P000000bfvpQAA","Application__c":"a004P00000xaBQKQA2"}

So the new property (AcademicInstitution) never gets defined and the datatable column I've assigned to it remains blank for the record. Another odd thing is this is a problem in production and not in sandbox.

How is this happening and what is the solution?

Answer 1

I don't know for sure about the different environments issue (Sandbox vs Production), but one issue that I'm pretty sure of is that there is a case sensitivity mismatch here. In the prereq object, I see that the field is defined as:

Other_Academic_institution__c

However, in the console log and commented out if statement, you have the field defined as:

Other_Academic_Institution__c

If you notice, Institution is capitalized, whereas it isn't in the object. My guess is that the field is defined without a capital I in one of the environments, and with a capital I in another. Since Javascript is case sensitive, there needs to be a match between the property you're using, and what is in the object itself.

There are two solutions I can think of right now for this. The first is to make sure the api names match in case between your different environments and then have the key in the JS match the case of Salesforce exactly. The second would be to take the returned object and make all the field names fully uppercase or lowercase and then use a similar syntax for accessing them (this will make it environment independent, as well as adjusting to a change in the field name's case). If you want to follow the latter solution, you can check out this solution here. There are likely other solutions, but these are just the first two that I quickly thought of.