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!
Solved! Go to 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.
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.
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.
Just be advised that your targeted browsers would have to support ES6 arrow functions and array.reduce to use Thomas's code.