如何在Javascript循环中的每个项目之后添加html换行符？

Question

I would like to display a list in my web component, with a line break, the problem is that my function that loops on the list is in Javascript, and I call it in my html. How can I do it?

I tried :

• result.join("\\n"); //this work on console
• result.join( html ``<br/>``); //(Windsor[object HTMLTemplateElement]groot )
• result.push(value,"\\n"); //(Windsor, ,groot)

Javascript

_getValues(field) 
{

    switch (field.type) {
...

default:

          if (this.values.length) {
            for (const [index, value] of this.values.entries()) {
              result.push(value);
            }
            return result;
          } else 
          return (this.values);
}

HTMLTemplate Polymer 3.0

static get template() {
    return html `
...
                <template is="dom-repeat" items="{{fields}}">
                    <span><b> item :</b> <br> [[_getValues(item)]] </span>  
                </template> `

I expect the output in the IHM like this :

Windsor
groot

But i have this :

Windsor,groot 

or Windsor,,groot or Windsor[object HTMLTemplateElement]groot

Answer 1

I think that this would work if your fields object looked more like this

fields : [
 {name: 'Windsor', value: 'groot'}
]

  <template is="dom-repeat" items="{{fields}}">
                        <div><b> name :</div> <div> value </div>  
                    </template> 

If calling your function in the template is working then this should work as well

<div><b> item :</b></div> <div> [[_getValues(item)]] </div>