GroupBy in JavaScript zu Gruppe JSON-Daten, und füllen Sie auf optgroup

Ich bin ein bisschen verloren.
Ich bin immer diese 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"
}]

Und ich möchte dies alles in einem select mit Optionen und optgroups. Tatsächlich ist die optgroup werden sollte, Kategorie

Ich würde gerne so etwas wie dieses:

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

Heute habe ich nur gemacht, weil ich habe Mühe zu viel:

$(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");
        });
    });
});

Wie Sie sehen können keine optgroup 🙂
Gibt es eine Möglichkeit, dies zu tun?
Kann ich auch ändern, meine JSON, wenn es können es einfacher machen.

Vielen Dank für jede Hilfe.

InformationsquelleAutor user1108276 | 2011-12-20

Vorausgesetzt, die optgroups bereits vorhanden sind, ändern Sie diese...

.appendTo("optgroup")

...

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

http://jsfiddle.net/FG9Lg/

Wenn Sie nicht existieren, Sie brauchen, um Sie zu erstellen, aber ich würde vorschlagen, eine Umstrukturierung Ihrer JSON-Antwort für jedes item geschachtelt unter die richtige Kategorie.

...

{
    "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 könnte man dann so machen:

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/

epic Benutzername ist alles, was ich zu sagen habe.
Danke. Es war entweder das, oder "SCHAU MICH AN! SCHAU MICH AN!".
Vielen Dank!! Ich habe meine modifizierten JSON und getan, wie du gesagt hast! Es funktioniert perfekt!
Alternativ könnte ein map/reduce-auf die ursprüngliche Einstellung aus, um die Liste der Gruppen, als seeder... genau das selbe, guter Vorschlag.
Rückblick auf meine zweite Lösung, die ich sehe, dass es fehlerhaft. Ich hätte die Kategorien aufgebaut wie ein Array von Objekten als gut, da die Reihenfolge der Aufzählung nicht garantiert werden. Fühlen Sie sich frei, um weitere Lösungen wie das map/reduce-wenn Sie wollen.

InformationsquelleAutor

Wenn ich du wäre, würde ich eine kleine Bibliothek namens Unterstreichen zur Gruppe der Daten, die zurückgegeben wird, in einfacher Darstellung.

Finden diesen code unter, und Sie können auch sehen, diese live-demo:

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

var optGroups = [];
for (var key in groupData) {
    if (groupData.hasOwnProperty(key)) {
        var optGroup = $("<optgroup></optgroup>");
        optGroup.attr("label", key);
        var currentGroup = groupData[key];
        for (var i = 0; i < currentGroup.length; i++) {
            $("<option />").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]);
}

Wenn Sie zögern, Unterstrich Bibliothek, können Sie erwägen, diese groupBy Funktion:

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

VERWENDUNG:

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

InformationsquelleAutor Abdul Munim

Ich weiß, dieser thread ist sehr alt, aber ich war etwas brauchen ähnlich und ich kam mit dieser. Es fügt automatisch optgroups, wenn erforderlich, und füllen Sie mit Optionen. Plus, es funktioniert sowohl, wenn Sie optgroups und Wann nicht.

http://jsfiddle.net/mzj0nuet/

var select = $('#product');

$.each(data, function (key, cat) {
    var option = "<option value='"+cat.id+"'>"+cat.name+"</option>";

    //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("<optgroup label='" + group + "' />");
        }

        select.find("optgroup[label='" + group + "']").append(option);

    //No category, no optgroup. Add this as simple option
    } else {
        select.append(option);
    }        
});

InformationsquelleAutor ToX 82

In Fall, dass Sie möchten, um Sie zu halten JSON-format ist, das folgende würde Ihre Frage zu beantworten:

//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('<optgroup id ="'+optgroupId+'"label="'+item.category+'">');
    }
});
//append the options to their corresponding optgroups
$.each(data.response, function(index, item) {
    var optgroupId = "cat-" + item.category.replace(/\s/g, "");
    $('#'+optgroupId).append('<option>' + item.name + '</option>');
});

Hoffe, das hilft!

InformationsquelleAutor Jlil

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.