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

Question

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.

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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

Answer 5

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.