0

I am using dependent LWC and from a lower level I am passing an array to its parent. I first tried by hardcoding the array and that worked ok

@track testmap=[{'Id':'01t6700000Cwxot','Name':'Product1'},{'Id':'01t6700000CwxjY','Name':'Product2'}];

Now I am building this dynamically when some click happens and I build a string that I turn or try to turn into the format that works above but it doesn't. I thought Split would do but I am wrong or doing something stupid that I can't see anymore..

How can I convert my concatenation into the good format of my testmap?

this.clickedAddSpot=this.clickedAddSpot+','+ "{'id':'"+this.record.prod_id__c+"','Name':'"+this.record.prod_name__c+"'}";
if(this.clickedAddSpot.substring(0, 1)==','){
    this.clickedAddSpot = this.clickedAddSpot.substring(1);
    console.log('title ' + this.clickedAddSpot);
}

this.selSpot = this.clickedAddSpot.split(',');
console.log('showRowDetails the array is :' +this.selSpot);

Here is the output in Java console

showRowDetails the array is :{'Id':'01t6700000Cwxot','Name':'Product1'},{'Id':'01t6700000CwxjY','Name':'Product2'}

Improve this question
2
  • 3
    Why are you using string concatenation instead of just pushing new items to this.selSpot? Commented Aug 18, 2023 at 10:01
  • @Adam, Simply because i am self learning and didn't know Commented Aug 18, 2023 at 13:48

3 Answers 3

Reset to default
1

String manipulation should be the last resort.

[{'Id':'01t6700000Cwxot','Name':'Product1'}, {'Id':'01t6700000CwxjY','Name':'Product2'}]

If the desired output is this one, the task would be a lot easier if you define an array then push several object. You need an array (could be selSpot) and several object with two properties: Id and Name. You can build those object each time a user select the spot:

selSpot = [];

yourMethod() {
    // something

    // Define the new object
    const clickedSpot = {
        Id: this.record.prod_id__c,
        Name: this.record.prod_name__c
    };
    this.selSpot.push(clickedSpot);

    // pass the array to the parent
    const selectedSpotEvent = new CustomEvent('meaningfulEventName', { detail: { selectedSpot: this.selSpot.map((elem) => ({...elem})) });
    this.dispatchEvent(selectedSpotEvent);
}

Keep in mind that Javascript is case-sensitive, so id and Id are not the same.
Note that I deep cloned the array before passing it to the parent, this way the parent component cannot mutate the one of the child, nor its elements.
Documentation (emphasis mine)

JavaScript passes all data types by reference except for primitives.
If a component includes an object in its detail property, any listener can mutate that object without the component’s knowledge. This is a bad thing!
It’s a best practice either to send only primitives, or to copy data to a new object before adding it to the detail property.
Copying the data to a new object ensures that you’re sending only the data you want, and that the receiver can’t mutate your data.

Please use meaningful names for variables, calling an array testmap may confuse others

Improve this answer
0

Instead of using a string, you can populate a list directly using push. For example:

this.clickedAddSpot = [];
this.clickedAddSpot.push("{'id':'"+this.record.prod_id__c+"','Name':'"+this.record.prod_name__c+"'}");
Improve this answer
2
  • This way clickedAddSpot would be an array of string. An array of object would make everything smoother Commented Aug 18, 2023 at 10:08
  • Agreed. I wasn't sure if they needed it as a string or an object. Commented Aug 18, 2023 at 10:42
0

I suppose this is JS.

You can use standard JS Objects and push them to your array.

this.selSpot = [];
this.selSpot.push({'id': this.record.prod_id__c ,'Name': this.record.prod_name__c})

When everything is added to the array you can get the String representation with JSON.stringify(this.selSpot)

Hope this helps :)

Improve this answer

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.