循环 JSON 数据以使用 optgroup 部分填充 select 框中的分析瘫痪

Question

我有 Analysis Paralysis 并且需要一些输入。我可以修改 SQL 查询、JavaScript、AND/or CFML 控制器（所有代码已在下面发布）。

我要做的就是用选项和选项组填充 select 框。 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 框看起来像这样（大致）：

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

循环 JSON 数据以使用 optgroup 部分填充 select 框中的分析瘫痪

Analysis Paralysis in looping over JSON data to populate select box with optgroup sections

javascript

coldfusion

json