javascript - 循环遍历 JSON 数据以使用 optgroup 部分填充选择框时的分析瘫痪

Question

我有Analysis Paralysis并需要一些输入。我可以修改 SQL 查询、JavaScript 和/或 CFML Controller (所有代码都已在下面发布)。

我要做的就是用选项和选项组填充一个选择框。 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 和 unitIDs)但是是否有更有效的方法？:

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

问题是如何构建 Select2 可以理解的 JSON 字符串？我建议为每个 GroupLabel 创建一个嵌套的子数组，如 Grouped Data 下的文档中所述.

CF11+ 和 Lucee 4.5+ 支持 cfloop "group" ，这将使事情变得容易得多。只需 cfloop 通过查询并按“groupLabel”分组。 (注意:不要忘记修改 SQL 查询和 ORDER BY g.groupLabel，以便分组按预期工作。)

TryCF.com Example

代码:

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
      }
    ]
  }
]