Need JSON Column formatting for multi selection with lookup values to show only first 5 selections

Question

Hi I try to reduce a multi selection column to limit the displaying to 1st 5 selections followed by a "..." if there are more, otherwise the sharepoint list row would grow very neigh.

But this code only renders part of the if statement 5 time overlapping partly each other.
Any idea what is wrong about it?

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "forEach": "choice in @currentField",
      "elmType": "span",
      "children": [
        {
          "elmType": "span",
          "txtContent": "=if(loopIndex < 5, [$choice.lookupValue], '')"
        },
        {
          "elmType": "span",
          "txtContent": "=if(loopIndex < 5 && loopIndex < length(@currentField) - 1, ', ', '')"
        }
      ]
    },
    {
      "elmType": "span",
      "txtContent": "=if(length(@currentField) > 5, '...', '')"
    }
  ]
}

Answer 1

Please apply following JSON codes to the lookup column.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "block"
  },
  "children": [
    {
      "elmType": "div",
      "forEach": "test in @currentField",
      "txtContent": "=if(loopIndex('test') < 5, '[$test.lookupValue]', if(loopIndex('test') < 5 && loopIndex('test') < length(@currentField) - 1, ',', if(length(@currentField) > 5, '...', '')))"
    }
  ]
}

Result:

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "block"
  },
  "children": [
    {
      "elmType": "div",
      "forEach": "choice in @currentField",
      "txtContent": "=if(loopIndex('choice') < 3, '[$choice.lookupValue]', if(loopIndex('choice') < 3 && loopIndex('choice') < length(@currentField) - 1, ',', ''))"
    },
    {
      "elmType": "div",
      "txtContent": "=if(length(@currentField) > 3, '...', '')"
    }
  ]
}

The code here works your code repeated ... for all elements after the 5th.
Anyway inspecting your code I found my problem :)