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!

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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:

<SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>Quart<SPAN class="punctuation token">.</SPAN>innerHTML <SPAN class="operator token">=</SPAN> <SPAN class="string token">'RESULTS: '</SPAN><SPAN class="operator token">+</SPAN>Quarter<SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

this is the html line:

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">data-dojo-attach-point</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>Quart<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

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

Thanks in advance!

Najděte více příspěvků označených jako

Accepted answers

ThomasSolow

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.

All comments

RobertScheitlin__GISP

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

ThomasSolow

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

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.

Připojte se k diskusi

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.