Split function in JSON/Excel format for Sharepoint online - json

Question

I am using sharepoint online as an image library. I am using 'keywords' to tag each image. The field is a string of delimited values like this:
keyword1;keyword2;keyword3
I would like to format this field value by splitting the string using the semi-colon delimiter and showing each keyword in its own span, so its looks like this:
(keyword 1) (keyword 2) (keyword 3)
I'm not sure if I need to use a calculated column to do this or if it is even possible? I've tried using 'forEach' but i cannot seem to loop through the items - they just render as a single value in a single span?
This is what i'm using at the moment:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"hideSelection": true,
"tileProps": {
"height": "300",
"width": "300",
"formatter": {
"elmType": "div",
"style": {
"display": "flex",
"flex-wrap": "wrap",
"align-items": "stretch",
"box-shadow": "0 1.6px 3.6px 0 #00000022, 0 0.3px 0.9px 0 #0000001c",
"min-width": "150px",
"width": "100%",
"margin-bottom": "0",
"border-radius": "3px",
"margin": "0 2px",
"background-color": "#fbfbfb",
"height": "350px"
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"flex-wrap": "wrap",
"position": "relative",
"padding-bottom": "30px",
"width": "100%"
},
"children": [
{
"elmType": "div",
"style": {
"width": "100%",
"background-color": "#e4e4e4",
"overflow": "hidden",
"height": "200px",
"display": "flex",
"align-items": "center",
"justify-content": "center",
"position": "relative"
},
"children": [
{
"elmType": "div",
"style": {
"oveflow": "=if([$File_x0020_Type] == '', 'auto', 'hidden')"
},
"children": [
{
"elmType": "img",
"style": {
"width": "=if([$File_x0020_Type] == '', '100%', '0'",
"height": "=if([$File_x0020_Type] == '', '100px', '0'"
},
"attributes": {
"src": "=if([$File_x0020_Type] == '', 'https://spoprod-a.akamaihd.net/files/fabric/office-ui-fabric-react-assets/foldericons-fluent/folder-large_frontplate_nopreview.svg', '')"
}
},
{
"elmType": "img",
"style": {
"width": "100%",
"height": "100%",
"display": "=if([$File_x0020_Type] == '', 'none', '')"
},
"attributes": {
"src": "#thumbnail.300x300"
},
"defaultHoverField": "[$FileLeafRef]"
}
]
}
]
},
{
"elmType": "div",
"style": {
"margin": "15px 0",
"position": "absolute",
"top": "200px",
"width": "100%"
},
"attributes": {
"class": "ms-fontSize-14 ms-fontWeight-semibold"
}
},
{
"elmType": "div",
"style": {
"display": "flex",
"flex-wrap": "wrap",
"padding": "0 16px",
"line-height": "20px",
"width": "100%"
},
"children": [
{
"elmType": "div",
"style": {
"display": "inline-block",
"flex": "1 0 100%"
},
"children": [
{
"elmType": "div",
"style": {
"color": "#a7a7a7",
"font-weight": "bold"
},
"txtContent": "Keywords"
},
{
"elmType": "div",
"children": [
{
"forEach": "kwIterator in #currentField",
"elmType": "div",
"txtContent": "[$kwIterator]",
"attributes": {
"class": "ms-bgColor-themePrimary ms-fontColor-white",
"title": "='keyword:' + =[$kwIterator]"
},
"style": {
"width": "16px",
"height": "16px",
"text-align": "center",
"margin": "1px"
}
}
]
}
]
},
{
"elmType": "div",
"style": {
"display": "inline-block",
"flex": "1 0 34%"
},
"children": [
{
"elmType": "div",
"style": {
"color": "#a7a7a7"
},
"txtContent": "=if([$AverageRating] >= 5, '*****', if([$AverageRating] >= 4, '****', if([$AverageRating] >= 3, '***', if([$AverageRating] >= 2, '**', if([$AverageRating] >= 1, '*', 'no rating'))))"
},
{
"elmType": "div",
"style": {
"color": "#a7a7a7",
"font-size": "40px"
},
"txtContent": "=if([$AverageRating] >= 5, '*****', if([$AverageRating] >= 4, '****', if([$AverageRating] >= 3, '***', if([$AverageRating] >= 2, '**', if([$AverageRating] >= 1, '*', '-'))))"
}
]
}
]
}
]
}
]
}
}
}
Any pointers to iterate through a delimited list of values would be appreciated.

Answer 1

According to my research, forEach does not support multiple lines of text type.
From this article:
The field used in the loop must be in a supported field type with multi-value option enabled: Person, Lookup, and Choice.
Since all the text in the multi-line text is recognized as a whole, we couldn't split it via ";" and add the link break between them with Json.