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 à cette liste, comment m'y prendre avec jQuery ? Le client souhaite que cette liste soit modifiable dynamiquement.

Solution

Tout d'abord, votre code cité n'est pas JSON. Votre code est une notation littérale d'objet JavaScript. [JSON][1] est un sous-ensemble de cette notation conçu pour faciliter l'analyse.

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

Vous n'avez pas besoin ou ne voulez pas de jQuery pour cela, juste du JavaScript.

Ajouter un élément:

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

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

Suppression d'un élément:

Il existe plusieurs méthodes. La méthode [splice][2] est 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 retirés.

Ajouter au milieu:

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

removed_items = arrayObject.splice(index, num_to_remove[, add1[, add2[, ...]]]);
  • index - l'index à partir duquel on commence à faire des changements
  • num_to_remove - en commençant par cet index, supprimez ce nombre d'entrées
  • addN - ...puis 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 commençant à l'indice 2, on enlève zéro élément, puis on insère l'élément suivant. Le résultat ressemble à ça :


var data = {items: [
    {id: "1", name: "Snatch", type: "crime"},
    {id: "2", name: "Witches of Eastwick", type: "comedy"},
    {id: "7", name: "Douglas Adams", type: "comedy"},     // 
Commentaires (6)

Ce n'est pas du tout JSON, ce sont juste des objets Javascript. [JSON][1] 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, généralement, cela ne se fait pas 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, donc vous pouvez utiliser toutes les connaissances que vous avez déjà. Utilisez simplement 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);

[1] : http://www.json.org/

Commentaires (0)

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 tableau items sera plus court d'un élément.

Commentaires (0)