Xjyuk

Part of my house is inexplicably gone

Why did the Death Eaters wait to reopen the Chamber of Secrets?

Is Jesus the last Prophet?

Is it possible to have battery technology that can't be duplicated?

How to import .txt file with missing data?

ISP is not hashing the password I log in with online. Should I take any action?

If absolute velocity does not exist, how can we say a rocket accelerates in empty space?

What do you call the action of "describing events as they happen" like sports anchors do?

In Pandemic, why take the extra step of eradicating a disease after you've cured it?

Is it a good security practice to force employees hide their employer to avoid being targeted?

How to deal with an excess of white-space in a CRM UI?

How to soundproof the Wood Shop?

What's the difference between DHCP and NAT? Are they mutually exclusive?

Can you open the door or die? v2

Parsing text written the millitext font

In The Incredibles 2, why does Screenslaver's name use a pun on something that doesn't exist in the 1950s pastiche?

Keeping track of theme when improvising

LWC: detect last element in for:each iteration

Placement of positioning lights on A320 winglets

Is plausible to have subspecies with & without separate sexes?

Jam with honey & without pectin has a saucy consistency always

What is the theme of analysis?

Can I get a photo of an Ancient Arrow?

Is the first of the 10 Commandments considered a mitzvah?

LWC: detect last element in for:each iteration

Aura iteration too show value in two columnsLWC-Jest installation failsCan we See the lwc Module?Handle click outside element in LWCHow do you define an element with an ID attribute using LWC?LWC: Use data from outer iteration in inner iteration to conditionally render?LWC: Invalid event type “WireContextEvent” dispatched in elementLWC: Display HTML Contentonchange event not triggered on removal of last character - LWCLWC: Using “if” to condition CSS class dynamically in LWC

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

1

I'm trying to output a list of strings separated by commas in LWC, such as:

cat, dog, mouse

I need to use template for:each and output a list item and a comma, but only if the item is not the last in the list. But I'm having trouble since LWC does not support comparison operations in templates. I tried to set a field in JS to indicate which element is the last:

HTML:

<template for:each=animals.data for:item="animal">
 <b key=animal.Id>animal.Name</b>
 <template if:false=animal.isLast>
 ,&nbsp;
 </template>
</template>

JS:

@wire(getAnimals)
assignAnimals(animals) 
 this.animals = animals;
 if (this.animals.data && this.animals.data.length > 0) 
 this.animals.data[this.animals.data.length - 1].isLast = true;
 

But I cannot assign to this.animals.data[this.animals.data.length - 1].isLast because JS Proxy is guarding it.

TypeError: "proxy set handler returned false for property '"isLast"'"

The other options would be to create isLast field in the controller, but I would need to create a wrapper class.
Another possibility would be some CSS tricks, but I don't want to do that.

Is there any simple way to do this?

javascript lightning-web-components iteration

share|improve this question

asked 9 hours ago

mmm321321mmm321321

32029

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  the "proxy" you get is immutable, you can however, create a new array based on the proxy and then do a Join by ',' to output your desired string.
  
  – glls
  9 hours ago
  

  
  
  
  

add a comment | 

1

I'm trying to output a list of strings separated by commas in LWC, such as:

cat, dog, mouse

I need to use template for:each and output a list item and a comma, but only if the item is not the last in the list. But I'm having trouble since LWC does not support comparison operations in templates. I tried to set a field in JS to indicate which element is the last:

HTML:

<template for:each=animals.data for:item="animal">
 <b key=animal.Id>animal.Name</b>
 <template if:false=animal.isLast>
 ,&nbsp;
 </template>
</template>

JS:

@wire(getAnimals)
assignAnimals(animals) 
 this.animals = animals;
 if (this.animals.data && this.animals.data.length > 0) 
 this.animals.data[this.animals.data.length - 1].isLast = true;
 

But I cannot assign to this.animals.data[this.animals.data.length - 1].isLast because JS Proxy is guarding it.

TypeError: "proxy set handler returned false for property '"isLast"'"

The other options would be to create isLast field in the controller, but I would need to create a wrapper class.
Another possibility would be some CSS tricks, but I don't want to do that.

Is there any simple way to do this?

javascript lightning-web-components iteration

share|improve this question

asked 9 hours ago

mmm321321mmm321321

32029

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  the "proxy" you get is immutable, you can however, create a new array based on the proxy and then do a Join by ',' to output your desired string.
  
  – glls
  9 hours ago
  

  
  
  
  

add a comment | 

I'm trying to output a list of strings separated by commas in LWC, such as:

cat, dog, mouse

I need to use template for:each and output a list item and a comma, but only if the item is not the last in the list. But I'm having trouble since LWC does not support comparison operations in templates. I tried to set a field in JS to indicate which element is the last:

HTML:

<template for:each=animals.data for:item="animal">
 <b key=animal.Id>animal.Name</b>
 <template if:false=animal.isLast>
 ,&nbsp;
 </template>
</template>

JS:

@wire(getAnimals)
assignAnimals(animals) 
 this.animals = animals;
 if (this.animals.data && this.animals.data.length > 0) 
 this.animals.data[this.animals.data.length - 1].isLast = true;
 

But I cannot assign to this.animals.data[this.animals.data.length - 1].isLast because JS Proxy is guarding it.

TypeError: "proxy set handler returned false for property '"isLast"'"

The other options would be to create isLast field in the controller, but I would need to create a wrapper class.
Another possibility would be some CSS tricks, but I don't want to do that.

Is there any simple way to do this?

javascript lightning-web-components iteration

share|improve this question

asked 9 hours ago

mmm321321mmm321321

32029

<template for:each=animals.data for:item="animal">
 <b key=animal.Id>animal.Name</b>
 <template if:false=animal.isLast>
 ,&nbsp;
 </template>
</template>

@wire(getAnimals)
assignAnimals(animals) 
 this.animals = animals;
 if (this.animals.data && this.animals.data.length > 0) 
 this.animals.data[this.animals.data.length - 1].isLast = true;
 

TypeError: "proxy set handler returned false for property '"isLast"'"

share|improve this question

asked 9 hours ago

mmm321321mmm321321

32029

share|improve this question

asked 9 hours ago

mmm321321mmm321321

32029

asked 9 hours ago

mmm321321mmm321321

32029

asked 9 hours ago

mmm321321mmm321321

32029

2 Answers
2

active

oldest

votes

4

Just as addition to gNerbs answer:

if you really need or want a own component you can use the iterator directive which has a first / last item attribute

Like:

<template>
 <template iterator:it=animals>
 <c-child key=it.value.key animal=it.value.value is-last=it.last></c-child>
 </template>
</template>

Full Example for your Reference: https://developer.salesforce.com/docs/component-library/tools/playground/qaI8LcEzj/1/edit

Link to Docs: https://developer.salesforce.com/docs/component-library/documentation/lwc/create_lists

share|improve this answer

answered 7 hours ago

Renji-xDRenji-xD

30613

add a comment | 

2

Build your string in Javascript and just display it to the page as opposed to using the for:each template.

@track animalString;

@wire(getAnimals)
assignAnimals(animals) 
 this.animals = animals;

 this.animalString = this.animals.join(', ');

Then:

<span>!animalString</span>

Or what ever element/component you want to use to display your string.

share|improve this answer

edited 7 hours ago

answered 9 hours ago

gNerbgNerb

6,421937

• 
  
  
  

  
  3
  

  
  
  
  
  
  

  
  
  this.animalString = this.animals.join(', ');
  
  – sfdcfox
  9 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Nice! But it only works if I actually need to output a string - which I indeed do in this case. But what if I wanted to, for example, create a child component in an iteration and pass "isLast" as a parameter to this component? I wonder if there is some more general solution. But your solution works for my case this time, thanks again :)
  
  – mmm321321
  9 hours ago
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Renji-xD I think your answer is probably exactly what OP is looking for. You should past it as a separate answer as I'm sure it will be accepted.
  
  – gNerb
  7 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  ok i added it - just don`t wanted to hijack your answer which is still valid of course ;)
  
  – Renji-xD
  7 hours ago
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "459"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsalesforce.stackexchange.com%2fquestions%2f265515%2flwc-detect-last-element-in-foreach-iteration%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

4

Just as addition to gNerbs answer:

if you really need or want a own component you can use the iterator directive which has a first / last item attribute

Like:

<template>
 <template iterator:it=animals>
 <c-child key=it.value.key animal=it.value.value is-last=it.last></c-child>
 </template>
</template>

Full Example for your Reference: https://developer.salesforce.com/docs/component-library/tools/playground/qaI8LcEzj/1/edit

Link to Docs: https://developer.salesforce.com/docs/component-library/documentation/lwc/create_lists

share|improve this answer

answered 7 hours ago

Renji-xDRenji-xD

30613

add a comment | 

4

Just as addition to gNerbs answer:

if you really need or want a own component you can use the iterator directive which has a first / last item attribute

Like:

<template>
 <template iterator:it=animals>
 <c-child key=it.value.key animal=it.value.value is-last=it.last></c-child>
 </template>
</template>

Full Example for your Reference: https://developer.salesforce.com/docs/component-library/tools/playground/qaI8LcEzj/1/edit

Link to Docs: https://developer.salesforce.com/docs/component-library/documentation/lwc/create_lists

share|improve this answer

answered 7 hours ago

Renji-xDRenji-xD

30613

add a comment | 

Just as addition to gNerbs answer:

if you really need or want a own component you can use the iterator directive which has a first / last item attribute

Like:

<template>
 <template iterator:it=animals>
 <c-child key=it.value.key animal=it.value.value is-last=it.last></c-child>
 </template>
</template>

Full Example for your Reference: https://developer.salesforce.com/docs/component-library/tools/playground/qaI8LcEzj/1/edit

Link to Docs: https://developer.salesforce.com/docs/component-library/documentation/lwc/create_lists

share|improve this answer

answered 7 hours ago

Renji-xDRenji-xD

30613

<template>
 <template iterator:it=animals>
 <c-child key=it.value.key animal=it.value.value is-last=it.last></c-child>
 </template>
</template>

share|improve this answer

answered 7 hours ago

Renji-xDRenji-xD

30613

answered 7 hours ago

Renji-xDRenji-xD

30613

answered 7 hours ago

Renji-xDRenji-xD

30613

2

Build your string in Javascript and just display it to the page as opposed to using the for:each template.

@track animalString;

@wire(getAnimals)
assignAnimals(animals) 
 this.animals = animals;

 this.animalString = this.animals.join(', ');

Then:

<span>!animalString</span>

Or what ever element/component you want to use to display your string.

share|improve this answer

edited 7 hours ago

answered 9 hours ago

gNerbgNerb

6,421937

• 
  
  
  

  
  3
  

  
  
  
  
  
  

  
  
  this.animalString = this.animals.join(', ');
  
  – sfdcfox
  9 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Nice! But it only works if I actually need to output a string - which I indeed do in this case. But what if I wanted to, for example, create a child component in an iteration and pass "isLast" as a parameter to this component? I wonder if there is some more general solution. But your solution works for my case this time, thanks again :)
  
  – mmm321321
  9 hours ago
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Renji-xD I think your answer is probably exactly what OP is looking for. You should past it as a separate answer as I'm sure it will be accepted.
  
  – gNerb
  7 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  ok i added it - just don`t wanted to hijack your answer which is still valid of course ;)
  
  – Renji-xD
  7 hours ago
  

  
  
  
  

add a comment | 

2

Build your string in Javascript and just display it to the page as opposed to using the for:each template.

@track animalString;

@wire(getAnimals)
assignAnimals(animals) 
 this.animals = animals;

 this.animalString = this.animals.join(', ');

Then:

<span>!animalString</span>

Or what ever element/component you want to use to display your string.

share|improve this answer

edited 7 hours ago

answered 9 hours ago

gNerbgNerb

6,421937

• 
  
  
  

  
  3
  

  
  
  
  
  
  

  
  
  this.animalString = this.animals.join(', ');
  
  – sfdcfox
  9 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Nice! But it only works if I actually need to output a string - which I indeed do in this case. But what if I wanted to, for example, create a child component in an iteration and pass "isLast" as a parameter to this component? I wonder if there is some more general solution. But your solution works for my case this time, thanks again :)
  
  – mmm321321
  9 hours ago
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Renji-xD I think your answer is probably exactly what OP is looking for. You should past it as a separate answer as I'm sure it will be accepted.
  
  – gNerb
  7 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  ok i added it - just don`t wanted to hijack your answer which is still valid of course ;)
  
  – Renji-xD
  7 hours ago
  

  
  
  
  

add a comment | 

Build your string in Javascript and just display it to the page as opposed to using the for:each template.

@track animalString;

@wire(getAnimals)
assignAnimals(animals) 
 this.animals = animals;

 this.animalString = this.animals.join(', ');

Then:

<span>!animalString</span>

Or what ever element/component you want to use to display your string.

share|improve this answer

edited 7 hours ago

answered 9 hours ago

gNerbgNerb

6,421937

@track animalString;

@wire(getAnimals)
assignAnimals(animals) 
 this.animals = animals;

 this.animalString = this.animals.join(', ');

<span>!animalString</span>

share|improve this answer

edited 7 hours ago

answered 9 hours ago

gNerbgNerb

6,421937

answered 9 hours ago

gNerbgNerb

6,421937

answered 9 hours ago

gNerbgNerb

6,421937