Mfcttrf

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?

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

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.