11
votes

Groupby en JavaScript pour grouper les données JSON et peupler sur Optgroup

Je suis un peu perdu. Je reçois ce Json: xxx pré>

et j'aimerais mettre tout cela dans une sélection avec des options et des optgroups. En fait, l'optgroup devrait être une catégorie p>

Je voudrais quelque chose comme ceci: p> xxx pré>

aujourd'hui je n'ai fait que «m Trop de: P>

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

jquery json optgroup

0 commentaires

4 Réponses :

16
votes

En supposant que les optgroups existent déjà, changez ceci ... xxx pré>

à ceci ... p> xxx pré>

http://jsfiddle.net/fg9lg/ p>

S'ils n'existent pas, vous avez besoin Pour les créer, bien que je suggère une restructuration de votre réponse JSON pour que chaque article soit imbriqué dans la catégorie appropriée. p>

comme ça ... p>

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

7 commentaires

Le nom d'utilisateur épique est tout ce que j'ai à dire.

@ Donutdan4114 Merci. C'était soit ça ou "regarde-moi! Regardez-moi!".

Merci beaucoup!! J'ai modifié mon Json et j'ai fait comme vous l'avez dit! Ça marche parfaitement!

Sinon, aurait pu utiliser une carte / réduire sur l'ensemble d'origine pour obtenir la liste des groupes, en tant que semoir ... juste la même chose, bonne suggestion.

@ Tracker1: En regardant en arrière sur ma deuxième solution, je vois que c'est imparfait. Je devrais avoir les catégories structurées comme une éventail d'objets aussi bien que l'ordre d'énumération ne sera pas garanti. N'hésitez pas à ajouter plus de solutions comme la carte / réduire si vous en avez envie.

Juste génial. Sauvé beaucoup de temps. Merci beaucoup

+1 Cette approche a fonctionné pour moi, mais cela ne fonctionne que après avoir effectué un rafraîchissement sur le multiiselect - $ ("# produit"). Multisélecect ("rafraîchir"); donc cela pourrait sauver quelqu'un d'autre une demi-journée de tête rayer

16
votes

Si j'étais vous, j'utiliserais une petite bibliothèque appelée soussecore strong> pour regrouper les données qui est renvoyé dans une représentation plus facile.

Voir ce code ci-dessous et vous pouvez également voir cette Démo en direct forte >:: p> xxx pré>

Si vous hésitez à utiliser la bibliothèque de la sous-traitance, vous pouvez considérer cette fonction groupby code> fonction: p> xxx pré >

Utilisation: P>

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

0 commentaires

0
votes

Si vous souhaitez vous tenir au format JSON, ce qui suit répondrait à votre question: xxx

espère que cela aide!

0 commentaires

2
votes

Je sais que ce fil est très vieux, mais j'avais besoin de quelque chose de similaire et je suis arrivé avec ça. Il ajoute automatiquement des optgroups si nécessaire et les peupler des options. De plus, cela fonctionne à la fois lorsque vous avez des groupes optgroups et quand vous ne le faites pas.

0 commentaires