2

I'm working on a component to track Estimated Crop Plans for farmers. It's quite simple: we need to get the Crop and the number of Acres to be seeded. The component stores an array of crops and acres and then saves them as individual records. All of this is working well.

I want to add the ability to delete or change an entry in the UI. For instance, in the example below, I want the ability to both change an entry (e.g., acres of Wheat from 234 to 15,000) or to delete an element (e.g., delete Wheat altogether).

Component Pic

I know there is a lot more to it than this, and I may be looking in the wrong direction, but I'm wondering if part of the issue is to access the array elements in the Proxy. I'm not even sure if I'm stating this correctly, but you can see what I'm talk about in the other screen shot below from the console. Each time I click the Add Crop button, the arrays in the target are updated. (That's also true if I change the acres from 234 to 9,000. It maintains it's position in the array, but Acres is updated. But I do have to click Add Button, which adds another empty crop/acres.)

enter image description here

Below is the code for the Add Crop button.

newCropPlanCrop : function (component, event, helper) {
    var rowItemList = component.get("v.cropPlanCrops");
    rowItemList.push( { 'sobjectType': 'Estimated_Crop_Plan_Crop__c',
                        'Crop__c': null,
                        'Acres__c': null});

    component.set("v.cropPlanCrops", rowItemList);

    console.log(rowItemList);

},

I assume I would have to create a modify/delete button for each item that is generated by Add Button that had a function(s?) to do what I want. I also assume that a splice() method would be helpful for deleting. I'm not sure what to do for updating.

So, I guess the initial questions I have are:

(1) Is it possible to access the array elements in the Proxy Target? If so, how? (2) Is this a good path to explore as I try to figure this out, or is there a better way?

Thank in advance for advice. I'll update this post with more code/information if necessary.

EDIT: Here is the difference between logging rowItemList and v.cropPlanCrops as suggested by @Michal Vavra below:

enter image description here

EDIT - Response to @ZackWalton below: My attempts to access the array elements in the Proxy Target have just been using dot notation. (I have a feeling this is laughably incorrect.)

For example:

// Logging the v.cropPlansCrops to see elements in the Proxy Target array    
console.log('Logging v.cropPlanCrops: ', component.get('v.cropPlanCrops'));

// Using dot notation
let array = [component.get('v.cropPlanCrops.Proxy.[[Handler]].[[Target]]')];
console.log(array); // returns undefined.

I tried different combinations (e.g. Proxy.target; Proxy.handler.target; etc.). I've also tried creating a function that returns the array variable above. All return undefined, if I don't get a syntax error.

Basically, shooting in the dark.

I've also tried using methods like 'v.cropPlanCrops.map()'

EDIT - Log of firstEl

enter image description here

  • 1
    Are you using aura:iteration to render Crop Plan details? I don't see the problem in the Proxy object in your case at all. Your console log is weird because you are retrieving the array itself, try console.log(component.get('v.cropPlanCrops));. – Michal Vavra May 2 '18 at 21:07
  • Yes, I am using aura:iteration in the component to render the Crop Plan. And, yes, logging v.cropPlanCrops does give a slightly different result. [Added ss above.] Basically, v.cropPlanCrops adds an element to the array with null values for Crop__c and Acres__c, while rowListItem adds an empty array to the Proxy. [NB: the null value in the second elements Crop__c is a weird bug with the value stored in the object from which Crops are pulled. It's weird and I'll figure that out later.] – Josh Stigall May 3 '18 at 14:31
0

I think you are on the right path to figuring this out. I would refer to this developer guide on Proxy Objects.

Referring to that guide will answer your first question

You can interact with a Proxy object in the same way as you interact with the raw JavaScript object, but the object shows up in the browser’s console as a Proxy. It’s useful to understand LockerService’s usage of Proxy if you drop into your browser’s debugger and start poking around.

Update:

Removing elements from an array is simple if you know the index of the element. Like you mentioned, the slice function will help you with this.

var array = [2, 5, 9];
var index = array.indexOf(5);
if (index > -1) {
  array.splice(index, 1);
}

This snippet is taken from a stack overflow post.

As for updating elements in the array, you pretty much just need to iterate through the array and then use some identifier to decide when to stop and modify the correct object. Then just update the aura:attribute to see the update on the screen.

rowItemList.forEach(item => {
    if (item.Name == 'something') {
        item.Acres__c = 2000;
    }
});
component.set('v.cropPlanCrops', rowItemList);

Something like that

EDIT:

Try this

var array = component.get('v.cropPlanCrops');
var firstEl = array[0];
console.log('firstEl: ', firstEl);

The console log should be showing the first element in the array now. You could also do something like

var array = component.get('v.cropPlanCrops');
array.forEach(obj => {
    obj.Acres__c = 100;
});
component.set('v.cropPlanCrops', array);

This will update all the objects Acres in the array to 100;

  • Not sure where the all of the comments on this answer went! There was a lot of important info in them. – Josh Stigall May 7 '18 at 14:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.