Split column containing list and return multiple lines

[ZachBodenner]

Interesting Arcade problem here. So I have an attribute column that is filled with bullet lists. As an example, it might read something like:

• Maintain marsh and wetland by managing hydrology of Timber Creek

• Manage invasive species including purple loosestrife in marsh areas. Buckthorn, Tartarian honeysuckle and garlic mustard in woodlands.

Well, when I call that field in an Arcade expression, the carriage return isn't honored, and so the result is something like:

• Maintain marsh and wetland by managing hydrology of Timber Creek • Manage invasive species including purple loosestrife in marsh areas. Buckthorn, Tartarian honeysuckle and garlic mustard in woodlands.

So I thought to try a Split to remove the bullets and return the result as a string of text separated by new lines. I use the bullet as the Split character, run through the result in a for loop, and push the loop result to a new array, which I then try to break apart via the Concatenate variable (with a new line return).

var name = $feature.Name
var addr = $feature.Address
var acres = round($feature.Acres,2)+" acres"

//split attempt
  var sMgmt = split($feature.ManagementGoals,"•",10)

  var mm =[]
  
  for (var m in sMgmt){    if(!isEmpty(m)) {push(mm,sMgmt[m])}  }
  

  var v = concatenate(mm,TextFormatting.NewLine) 

  console ("count of split Mgmt goalks: "+count(sMgmt))
  console ("item 1: "+sMgmt[0])
  console ("item 2: "+sMgmt[1])
  console ("item 3: "+sMgmt[2])
  console ("mm: "+mm)
  console ("v: "+v)

var n = `<h3 style="color:#095902;font-size:24px;text-align:center;">${name}</h3>`
var a = `<p style="text-align:center;"><span style=color:#3e3e3e;font-size:16px;><strong>${addr}</strong><br><strong>${acres}</strong></span></p>`


var textString = `${n}${a}
 <p style = "font-size:16px;"><strong>Existing Landscale and Features</strong></p>
 <p>${$feature.ExistingLandscape}<p>
 <p style = "font-size:16px;"><strong>Management Goals</strong></p>
 <p>${v}<p>
 <p style = "font-size:16px;"><strong>Past Projects</strong></p>
 <p>${$feature.PastProjects}<p>
 <p style = "font-size:16px;"><strong>Future Projects</strong></p>
 <p>${$feature.FutureProjects}<p>
 <p style = "font-size:16px;"><strong>Additional Notes</strong></p>
 <p>${$feature.AdditionalNotes}<p>
`

return { 
	type : 'text', 
	text : textString
}

However, the variable v to concatenate doesn't seem to be working correctly, and just returns one long string:

Which part of the process is failing me here? I've tried a couple other ways to do this, but if there's an alternative to achieving the result of having the attribute value broken out into lines (with or without the bullet character), I'd be happy to adapt.

Additional context: I have full control over the dataset. The bullet point is not a requirement of the data and could be removed or changed, though I suspect either will still produce the same general workflow of using some kind of split, given that the attribute will still contain the list.

[SteveCole]

Rather than using <P> to create each line item, you could try using a basic HTML table to have each item on one line:

<table style="">
<tr><td style=""></td></tr>
</table>

This is just the bare syntax so you'll need to modify your code to fit this accordingly. You can apply style attributes to the table and/or table data. This is a specific example from one of my Arcade popups:

  content = content + '<table width=\"100%\" style=\"background:#99FF99;\"><tr><td valign=\'top\' colspan=\'4\' style=\"font-weight:bold;padding-left:3px;padding-right:3px\">ASIAN / PACIFIC ISLAND LANGUAGE SPEAKING POPULATION:</td></tr>';
  content = content + '<tr><td style=\"font-weight:bold;font-style:italic;\">Country:</td><td style=\"font-weight:bold;font-style:italic;\">Number of Persons:</td><td style=\"font-weight:bold;font-style:italic;\">Percent of Foreign-born population</td><td style=\"font-weight:bold;font-style:italic;\">Percent of Total Population:</td></tr>';

  if (Count(asianPacPopSort) > 0) {
      for(var index in asianPacPopSort){
        content = content + '<tr><td>' + asianPacPopSort[index][0] + '</td><td>' + asianPacPopSort[index][3] + '</td><td>' + Round(asianPacPopSort[index][1],2) + '%</td><td>' + Round(asianPacPopSort[index][2],2) + '%</td></tr>';	
      }
  } else {
      content = content + '<tr><td colspan=\'4\'>(None reported for this language grouping)</td></tr>';
  }
	
  content = content + '</table>';

In my code above, I don't know how many rows the table will have so there's a loop involved. If you know how any rows there will be, you can hardcode it and it will be easier. Hopefully this approach makes sense.

[jcarlson · Accepted solution]

Try replacing TextFormatting.NewLine with '\n'? Or possibly '<br>'

If you want to keep the list style, you could do something like this:

var v = `<ul><li>${Concatenate(mm, '</li><li>')}</li></ul>`

[BlakeTerhune · Accepted solution]

Since you're making html, you could leverage that and use an unordered list that will automatically apply formatting.

var sMgmt = split($feature.ManagementGoals, "•", 10, true)

// Format text strings with html list item tags.
for(var i in sMgmt) {
  sMgmt[i] = "<li>" + Trim(sMgmt[i]) + "</li>"
}

// Combine all the list items within html unordered list.
var v = "<ul>" + Concatenate(sMgmt) + "</ul>"

[ZachBodenner]

Both of these work great! I'm going with @BlakeTerhune  for this particular solution - I'm not exactly sure why but my split was resulting in the first split result (sMgmt[0]) being an empty value, and this code structure gets around it (possibly because of the Trim function?). The result looks pretty good!

[BlakeTerhune]

If you check the documentation for Split(), you'll see the last parameter is removeEmpty. There's something in the logic of how Split() works that can create empty items in the array and setting removeEmpty to true will resolve that.