Анализ Паралич в цикле по данным JSON для заполнения поля выбора разделами optgroup

Question

У меня Анализ паралича и мне нужно немного информации.Я могу изменить SQL-запрос, JavaScript и / или контроллер CFML (весь код был опубликован ниже).

Все, что я хочу сделать, - это заполнить поле выбора опциями и оптгруппами.Optgroup - это то, что меня сбивает с толку.

SQL довольно прост и выглядит так:

SELECT
    g.groupID,
    g.groupLabel,
    u.unitLabel,
    u.unitID
  FROM
    group g
    LEFT JOIN unit u ON g.groupID = u.groupID

И цикл (ы) CFML выглядит следующим образом (это также гдеЯ считаю, что корректировка должна быть сделана с некоторой логикой, например, если thisGroupLabel совпадает с preGroupLabel, остается в цикле и продолжает добавлять unitLabel и unitID), но есть ли более эффективный способ ?:

local.data.unitLabels = [];
    for(local.row in local.__unitLabels){
        local.unit = {};
        local.unit.groupLabel = local.row.groupLabel;
        local.unit.unitLabel = local.row.unitLabel;
        local.unit.unitID = local.row.unitID;
        //  loop over the array so that we can identify which one needs to be preselected
        for(local.dataValue in local.data.unitDetails){
            if (local.unit.unitID eq local.dataValue.unitID) {
                local.unit.selected = 'selected';
            } else {
                local.unit.selected = '';
            }
        }
    arrayAppend(local.data.unitLabels, local.unit);
}

Данные JSON выглядятвот так, но у меня есть доступ к запросу, поэтому я могу переформатировать его при необходимости:

{
    "data": {
        "selectDataOptions": [{
            "groupLabel": "COMPLETION",
            "selected": "",
            "unitID": 1,
            "unitLabel": "Completion"
        }, {
            "groupLabel": "DISTANCE",
            "selected": "",
            "unitID": 2,
            "unitLabel": "Meters"
        }, {
            "groupLabel": "DISTANCE",
            "selected": "",
            "unitID": 3,
            "unitLabel": "Miles"
        }, {
            "groupLabel": "DISTANCE",
            "selected": "",
            "unitID": 4,
            "unitLabel": "Yards"
        }, {
            "groupLabel": "TIME",
            "selected": "",
            "unitID": 5,
            "unitLabel": "Hours"
        }, {
            "groupLabel": "TIME",
            "selected": "",
            "unitID": 5,
            "unitLabel": "minutes"
        }, {
            "groupLabel": "TIME",
            "selected": "",
            "unitID": 5,
            "unitLabel": "Seconds"
        }]
    }
}

В моем нынешнем виде поле выбора выглядит примерно так:

<select>
    <optgroup>COMPLETION</optgroup>
    <option>Complettion</option>
    <optgroup>DISTANCE</OPTGROUP>
    <option>Meters</option>
    <optgroup>DISTANCE</optgroup>
    <option>Miles</option>
    <optgtroup>DISTANCE</optgroup>
    <option>Yards</option>
    <optgtroup>TIME</optgroup>
    <option>Hours</option>
    <optgtroup>TIME</optgroup>
    <option>Minutes</option>
</select>

Обратите вниманиечто optgroup Distance и TIME повторяются.Желаемый результат будет выглядеть так:

<select>
    <optgroup>COMPLETION</optgroup>
    <option>Complettion</option>
    <optgroup>DISTANCE</OPTGROUP>
    <option>Meters</option>
    <option>Miles</option>
    <option>Yards</option>
    <optgroup>TIME</optgroup>
    <option>Hours</option>
    <option>Mintues</option>
</select>

Answer 1

Проблема в том, как создать строку JSON, которую может понять Select2?Я бы предложил создать вложенный массив дочерних элементов для каждого GroupLabel, как описано в документации по Сгруппированные данные .

CF11 + и Lucee 4.5+ поддерживают cfloop "group" , что упростит задачу.Просто cfloop через запрос и группировать по "groupLabel".( Примечание: не забудьте изменить запрос SQL и ORDER BY g.groupLabel, чтобы группировка работала как положено. )

Пример TryCF.com

Код:

data= [];
cfloop(query="qDemo", group="groupLabel") {

   children = [];
   cfloop() {
      arrayAppend(children, {"id": qDemo.unitID, "text": qDemo.unitLabel});
   }

   arrayAppend(data, {"text" : qDemo.GroupLabel, "children" : children });
}

writeDump(serializeJSON(data));

Результат:

[
  {
    "text": "COMPLETION",
    "children": [
      {
        "text": "Completion",
        "id": 1
      }
    ]
  },
  {
    "text": "DISTANCE",
    "children": [
      {
        "text": "Meters",
        "id": 2
      },
      {
        "text": "Miles",
        "id": 3
      },
      {
        "text": "Yards",
        "id": 4
      }
    ]
  },
  {
    "text": "TIME",
    "children": [
      {
        "text": "Hours",
        "id": 5
      },
      {
        "text": "minutes",
        "id": 5
      },
      {
        "text": "Seconds",
        "id": 5
      }
    ]
  }
]