web-dev-qa-db-fra.com

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 puis-je m'y prendre avec jQuery? Le client souhaite que cette liste soit modifiable de manière dynamique.

javascriptjqueryobject-literal
81
Bug Magnet

Tout d’abord, votre code cité est pas JSON. Votre code est la notation littérale d'objet JavaScript. JSON est un sous-ensemble de celui conçu pour une analyse plus facile.

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 ne voulez pas jQuery pour cela, juste JavaScript.

Ajout d'un élément:

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

Cela ajoute à la fin. Voir ci-dessous pour ajouter au milieu.

Supprimer un élément:

Il y a plusieurs façons. La méthode splice 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 d'origine et renvoie un tableau des éléments que vous avez supprimés.

Ajout au milieu:

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

removed_items = arrayObject.splice(index, num_to_remove[, add1[, add2[, ...]]]);
  • index - l'index auquel commencer à apporter des modifications
  • num_to_remove - en commençant par cet index, supprimez autant d'entrées
  • addN - ... et ensuite insérer ces éléments

Je peux donc ajouter un article en 3ème position comme ceci:

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

Cela dit: à partir de l'index 2, supprimez les éléments nuls, puis insérez l'é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 supprimer et en ajouter d’autres à la fois:

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

... ce qui signifie: à partir de l'index 1, supprimez trois entrées, puis ajoutez ces deux entrées. Ce qui résulte en:

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"}
]};
214
T.J. Crowder

Splice est bon, tout le monde explique splice, donc je ne l'ai pas expliqué . Vous pouvez également utiliser le mot clé delete en JavaScript, c'est bon . Vous pouvez utiliser $ .grep aussi pour manipuler ceci en utilisant jQuery.

La manière 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, l’épissure est préférable, car l’épissure est une fonction lourde. Splice créer un nouveau tableau, si vous avez une taille énorme de tableau alors il peut être gênant. delete est parfois utile, après delete si vous recherchez la longueur du tableau, sa longueur ne change pas. Alors utilisez-le judicieusement.

19
Imrul

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}};
10
Peter Drinnan

Ce n'est pas du tout JSON, c'est 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 aucune information sur la manipulation de JSON à l'aide de jQuery, c'est parce que jQuery n'a rien qui puisse le faire et que ce 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 chaîne JSON si c'est ce dont vous avez besoin. (jQuery a des méthodes pour la conversion, cependant.)

Ce que vous avez est simplement un objet qui contient un tableau, vous pouvez donc 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 à l'aide de 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);
8
Guffa

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

data.items.pop();

votre tableau items sera 1 élément plus court.

3
Spiny Norman

Ajout d'un objet dans un tableau JSON

var arrList = [];
var arr = {};   
arr['worker_id'] = worker_id;
arr['worker_nm'] = worker_nm;
arrList.Push(arr);

Supprimer un objet d'un json

Ça marche pour moi.

  arrList = $.grep(arrList, function (e) { 

        if(e.worker_id == worker_id) {
            return false;
        } else {
            return true;
        }
    });

Il retourne un tableau sans cet objet.

J'espère que ça aide. 

2
Siva Anand

Gardez les choses simples :)

var my_form_obj = {};
my_form_obj.name = "Captain America";
my_form_obj.weapon = "Shield";

J'espère que cela t'aides!

0
Talha

Essayer

data.items.pop();
data.items.Push({id: "7", name: "Matrix", type: "adult"});

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

data.items.pop();
data.items.Push({id: "7", name: "Matrix", type: "adult"});

console.log(data);
0
Kamil Kiełczewski