82 votes

Ajouter/supprimer des éléments d'un objet JavaScript avec jQuery

J'ai un objet JavaScript comme suit :

var data = {items: [
    {id: "1", name: "Snatch", type: "crime"},
    {id: "2", name: "Witches of Eastwick", type: "comedy"},
    {id: "3", name: "X-Men", type: "action"},
    {id: "4", name: "Ordinary People", type: "drama"},
    {id: "5", name: "Billy Elliot", type: "drama"},
    {id: "6", name: "Toy Story", type: "children"}
]};

Si je voulais ajouter/supprimer des éléments de cette liste, comment pourrais-je le faire en utilisant jQuery ? Le client souhaite que cette liste soit modifiable de manière dynamique.

2 votes

Ce n'est pas JSON. C'est un objet littéral : benalman.com/news/2010/03/theres-no-such-thing-as-a-json ( et la croisade contre les objets JSON continue.... )

4 votes

@Matt : En effet. Eh bien, JSON est un format de données textuelles. Et le code cité ne serait pas JSON même s'il était dans une chaîne (car JSON exige des guillemets doubles sur les noms de propriétés).

6 votes

Merci de m'avoir éclairé. Cela ressemble pourtant bien à un objet JSON ! Merci encore !

221voto

T.J. Crowder Points 285826

Tout d'abord, votre code cité est pas JSON. Votre code est en notation littérale d'objet JavaScript. JSON est un sous-ensemble de celui-ci, conçu pour faciliter l'analyse syntaxique.

Votre code définit un objet ( data ) contenant un tableau ( items ) d'objets (chacun avec un id , name et type ).

Vous n'avez pas besoin ou envie de jQuery pour cela, juste de JavaScript.

Ajout d'un élément :

data.items.push(
    {id: "7", name: "Douglas Adams", type: "comedy"}
);

Cela ajoute à la fin. Voir ci-dessous pour l'ajout au milieu.

Suppression d'un élément :

Il y a plusieurs façons de procéder. Le site splice est la méthode la plus polyvalente :

data.items.splice(1, 3); // Removes three items starting with the 2nd,
                         // ("Witches of Eastwick", "X-Men", "Ordinary People")

splice modifie le tableau original, et retourne un tableau des éléments que vous avez supprimés.

En ajoutant au milieu :

splice fait à la fois l'ajout et le retrait. La signature de la splice la méthode est :

removed_items = arrayObject.splice(index, num_to_remove[, add1[, add2[, ...]]]);
  • index - l'indice auquel il faut commencer à faire des changements
  • num_to_remove - en commençant par cet index, supprimer ce nombre d'entrées
  • addN - ...et ensuite insérer ces éléments

Je peux donc ajouter un élément en 3ème position comme ceci :

data.items.splice(2, 0,
    {id: "7", name: "Douglas Adams", type: "comedy"}
);

Ce qui veut dire : En partant de l'indice 2, on enlève zéro élément, puis on insère cet élément suivant. Le résultat ressemble à ceci :

var data = {items: [
    {id: "1", name: "Snatch", type: "crime"},
    {id: "2", name: "Witches of Eastwick", type: "comedy"},
    {id: "7", name: "Douglas Adams", type: "comedy"},     // <== The new item
    {id: "3", name: "X-Men", type: "action"},
    {id: "4", name: "Ordinary People", type: "drama"},
    {id: "5", name: "Billy Elliot", type: "drama"},
    {id: "6", name: "Toy Story", type: "children"}
]};

Vous pouvez en enlever et en ajouter en même temps :

data.items.splice(1, 3,
    {id: "7", name: "Douglas Adams", type: "comedy"},
    {id: "8", name: "Dick Francis", type: "mystery"}
);

...ce qui signifie : En partant de l'indice 1, on enlève trois entrées, puis on ajoute ces deux entrées. Ce qui donne :

var data = {items: [
    {id: "1", name: "Snatch", type: "crime"},
    {id: "7", name: "Douglas Adams", type: "comedy"},
    {id: "8", name: "Dick Francis", type: "mystery"},
    {id: "4", name: "Ordinary People", type: "drama"},
    {id: "5", name: "Billy Elliot", type: "drama"},
    {id: "6", name: "Toy Story", type: "children"}
]};

0 votes

Bonjour, si je voulais déterminer le nombre d'éléments dans les données de l'objet afin de pouvoir définir dynamiquement l'"id" lors de l'ajout de nouveaux éléments, comment pourrais-je le faire ?

0 votes

@HudsonAtwell : data.items est un tableau. Les tableaux ont un length propriété. :-)

0 votes

Lorsque je fais le push, j'obtiens toujours "... has no method push". Hmm... Je ne comprends pas ce qui ne va pas...

19voto

Imrul Points 1486

Epissure est bon, tout le monde explique splice donc je ne l'ai pas expliqué. Vous pouvez aussi utiliser supprimer en JavaScript, c'est bien. Vous pouvez utiliser $.grep également de le manipuler en utilisant jQuery.

La méthode jQuery :

data.items = jQuery.grep(
                data.items, 
                function (item,index) { 
                  return item.id !=  "1"; 
                });

DELETE Way :

delete data.items[0]

Pour l'ajout de PUSH est mieux le splice, parce que le splice est une fonction lourdement pondérée. Splice crée un nouveau tableau, si vous avez une taille énorme de tableau alors cela peut être gênant. delete est parfois utile, après la suppression, si vous recherchez la longueur du tableau, il n'y a pas de changement dans la longueur. Utilisez-la donc à bon escient.

0 votes

Qu'essayez-vous de dire dans le dernier paragraphe ? C'est tellement brumeux, je n'ai rien compris.

1 votes

Vode down ! pour son pas supprimer juste faire indéfini index connexes

13voto

Peter Drinnan Points 1123

Si vous utilisez jQuery, vous pouvez utiliser la fonction extend pour ajouter de nouveaux éléments.

var olddata = {"fruit":{"apples":10,"pears":21}};

var newdata = {};
newdata['vegetables'] = {"carrots": 2, "potatoes" : 5};

$.extend(true, olddata, newdata);

Cela va générer :

{"fruit":{"apples":10,"pears":21}, "vegetables":{"carrots":2,"potatoes":5}};

8voto

Guffa Points 308133

Ce n'est pas du tout JSON, ce sont juste des objets Javascript. JSON est une représentation textuelle des données, qui utilise un sous-ensemble de la syntaxe Javascript.

Si vous ne trouvez pas d'informations sur la manipulation de JSON à l'aide de jQuery, c'est parce que jQuery n'a rien qui permette de le faire, et que cela n'est généralement pas fait du tout. Vous manipulez les données sous la forme d'objets Javascript, puis vous les transformez en une chaîne JSON si c'est ce dont vous avez besoin. (jQuery dispose toutefois de méthodes pour la conversion).

Ce que vous avez est simplement un objet qui contient un tableau, vous pouvez donc utiliser toutes les connaissances que vous avez déjà. Il suffit d'utiliser data.items pour accéder au tableau.

Par exemple, pour ajouter un autre élément au tableau en utilisant des valeurs dynamiques :

// The values to put in the item
var id = 7;
var name = "The usual suspects";
var type = "crime";
// Create the item using the values
var item = { id: id, name: name, type: type };
// Add the item to the array
data.items.push(item);

3voto

Spiny Norman Points 5699

Eh bien, c'est juste un objet javascript, donc vous pouvez manipuler data.items comme vous le feriez avec un tableau ordinaire. Si vous le faites :

data.items.pop();

votre items Le tableau sera plus court d'un élément.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X