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.
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 changementsnum_to_remove
- en commençant par cet index, supprimez ce nombre d'entréesaddN
- ...puis insérer ces élémentsJe 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"}, // <== 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 supprimer 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 supprime 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"}
]};
[1] : http://json.org [2] : https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/splice
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/