用于分组JSON数据并在optgroup上填充的GroupBy

我有点失落。 我得到这个JSON：

[{ "id": "210", "name": "Name 1", "category": "Category 1" }, { "id": "187", "name": "Name 2", "category": "Category 1" }, { "id": "186", "name": "Name 3", "category": "Category 1" }, { "id": "185", "name": "Name 4", "category": "Category 1" }, { "id": "184", "name": "Name 5", "category": "Category 1" }, { "id": "183", "name": "Name 6", "category": "Category 1" }, { "id": "182", "name": "Name 7", "category": "Category 1" }, { "id": "181", "name": "Name 8", "category": "Category 2" }, { "id": "180", "name": "Name 9", "category": "Category 3" }, { "id": "178", "name": "Name 10", "category": "Category 2" }] 

我想将所有这些都放在带有选项和选项组的选择中。 实际上，optgroup应该是category

我想要这样的东西：

   Name 1 Name 2 Name 3 Name 4 ...   Name 8 Name 10   Name 9  

今天我只是因为我挣扎得太多了：

 $(document).ready(function () { $.getJSON("5.php", { val: $(this).val() }, function (data) { $.each(data, function (i, item) { $("").attr("value", item.id).append(item.name).appendTo("optgroup"); }); }); }); 

你可以看到没有optgroup :)有没有办法做到这一点？ 我也可以修改我的JSON，如果它可以使它更容易。

谢谢你的帮助。

Answer 1

假设optgroups已经存在，请更改此…

 .appendTo("optgroup") 

对…

 .appendTo("optgroup[label='" + item.category + "']"); 

http://jsfiddle.net/FG9Lg/

---

如果它们不存在，则需要创建它们，但我建议重构您的JSON响应，以使每个项目嵌套在正确的类别下。

像这样…

 { "Category 1":[ {"id": "210","name": "Name 1"}, {"id": "187","name": "Name 2"}, {"id": "186","name": "Name 3"}, {"id": "185","name": "Name 4"}, {"id": "184","name": "Name 5"}, {"id": "183","name": "Name 6"}, {"id": "182","name": "Name 7"} ], "Category 2":[ {"id": "181","name": "Name 8"}, {"id": "178","name": "Name 10"} ], "Category 3": [ {"id": "180","name": "Name 9"} ] } 

所以你可以这样做：

 var product = $('#product'); $.each(data, function (key, cat) { var group = $('',{label:key}); $.each(cat,function(i,item) { $("",{value:item.id,text:item.name}) .appendTo(group); }); group.appendTo( product ); }); 

http://jsfiddle.net/FG9Lg/1/

Answer 2

如果我是你，我会使用一个名为Underscore的小型库来对以简单表示forms返回的数据进行分组。

请参阅下面的代码，您可能还会看到此实时演示 ：

 var groupData = _.groupBy(data, function (obj) { return obj.category; }); var optGroups = []; for (var key in groupData) { if (groupData.hasOwnProperty(key)) { var optGroup = $(""); optGroup.attr("label", key); var currentGroup = groupData[key]; for (var i = 0; i < currentGroup.length; i++) { $("").attr("value", currentGroup[i].id).html(currentGroup[i].name).appendTo(optGroup); } optGroups.push(optGroup); } } for(var i = 0; i < optGroups.length; i++) { $("#products").append(optGroups[i]); } 

如果您对使用groupBy库犹豫不决，可以考虑使用此groupBy函数：

 var groupBy = function(array, predicate) { var grouped = {}; for(var i = 0; i < array.length; i++) { var groupKey = predicate(array[i]); if (typeof(grouped[groupKey]) === "undefined") grouped[groupKey] = []; grouped[groupKey].push(array[i]); } return grouped; } 

用法：

 var groupData = groupBy(data, function (obj) { return obj.category; }); 

Answer 3

我知道这个线程很老，但我需要类似的东西，我想出了这个。 它会在需要时自动添加optgroup，并使用选项填充它们。 此外，它既适用于您有选择组，也适用于您。

http://jsfiddle.net/mzj0nuet/

 var select = $('#product'); $.each(data, function (key, cat) { var option = ""+cat.name+""; // If we ave a category property, add this item to an optgroup if (cat.hasOwnProperty("category")) { var group = cat.category; // If this optgroup is not already present, add it if (select.find("optgroup[label='" + group + "']").length === 0) { select.append(""); } select.find("optgroup[label='" + group + "']").append(option); // No category, no optgroup. Add this as simple option } else { select.append(option); } }); 

Answer 4

如果您希望按原样保留JSON格式，以下内容将回答您的问题：

 //Loop through the json, get distinct category names, and append them as optgroup to the select dropdown var categories = []; $.each(data, function(index, item) { if ($.inArray(item.category, categories) == -1) { categories.push(item.category); var optgroupId = "cat-" + item.category.replace(/\s/g, ""); $('#id_of_select_dropdown').append(''); } }); // append the options to their corresponding optgroups $.each(data.response, function(index, item) { var optgroupId = "cat-" + item.category.replace(/\s/g, ""); $('#'+optgroupId).append('' + item.name + ''); }); 

希望这可以帮助！