在JavaScript中使用GroupBy对JSON数据进行分组并在optgroup上进行填充

问题描述

我有点迷路了.我收到此JSON:

I am a little bit lost.I am getting this 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"
}]

我想将所有这些选项与选项和optgroups一起选择.其实optgroup应该是类别

And I would like to put all of this in a select with options and optgroups. Actually the optgroup should be category

我想要这样的东西:

<select name="products" class="product" id="product">
<optgroup label="Category 1">
    <option value="210">Name 1</option>
    <option value="187">Name 2</option>
    <option value="186">Name 3</option>
    <option value="185">Name 4</option>
    ...
</optgroup>
<optgroup label="Category 2">
    <option value="181">Name 8</option>
    <option value="178">Name 10</option>
</optgroup>
<optgroup label="Category 3">
    <option value="180">Name 9</option>
</optgroup>

今天我只做这个是因为我太努力了:

Today I have only made this because I'm struggling too much:

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

如您所见，没有optgroup :)有没有办法做到这一点?如果可以简化JSON，我还可以对其进行修改.

As you can see no optgroup :)Is there a way to do this?I can also modify my JSON if it can make it easier.

感谢您的帮助.

推荐答案

假设optgroup已经存在，请更改此...

Assuming the optgroups already exist, change this...

.appendTo("optgroup")

对此...

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

http://jsfiddle.net/FG9Lg/

如果它们不存在，则需要创建它们，尽管我建议您对JSON响应进行重组，以使每个项目都嵌套在适当的类别下.

If they don't exist, you need to create them, though I'd suggest a restructuring of your JSON response to have each item nested under the proper category.

喜欢这个...

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

因此您可以执行以下操作:

So you could then do this:

var product = $('#product');

$.each(data, function (key, cat) {
    var group = $('<optgroup>',{label:key});

    $.each(cat,function(i,item) {
        $("<option/>",{value:item.id,text:item.name})
            .appendTo(group);
    });

    group.appendTo( product );
});

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

这篇关于在JavaScript中使用GroupBy对JSON数据进行分组并在optgroup上进行填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！