Display an array with one element per line

[StahlyEngineering]

In a custom widget I want to display the contents of an output array one element per line. Currently the output in the widget's panel is:

RESULTS: 21N29W160,21N29W210

this is the js line that passes the array:

this.Quart.innerHTML = 'RESULTS: '+Quarter;‍

this is the html line:

<div data-dojo-attach-point="Quart"></div>‍

eventually each output line will be a link using a specific element of Quarter for the path and name.

Thanks in advance! 

[RobertScheitlin__GISP]

Stahly,

  Then you need to loop through the Quarter array using dojo array or a simple for loop. and add a "<br>" to the end of each line of text before you add it to the innerHTML.

[ThomasSolow · Accepted solution]

My advice would be to use an HTML list, like this:

let htmlString = Quarter.reduce((accum, current) => accum += `<li>${current}</li>`, "<ul>");

htmlString += "</ul>" 

this.Quart.innerHTML = 'RESULTS: '+htmlString;

For older versions of JS you could do:

var htmlString = Quarter.reduce(function(accum, current){ accum += "<li>"+current+"</li>"}, "<ul>");

htmlString += "</ul>";

You can style the list separately to your liking.

[RobertScheitlin__GISP]

Just be advised that your targeted browsers would have to support ES6 arrow functions and array.reduce to use Thomas's code.