Ik heb een JavaScript object als volgt:
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"}
]};
Als ik items aan deze lijst wil toevoegen/verwijderen, hoe zou ik dat dan doen met jQuery? De klant wil dat deze lijst dynamisch kan worden aangepast.
Ten eerste, je geciteerde code is niet JSON. Je code is JavaScript object letterlijke notatie. JSON is een subset van dat ontworpen voor eenvoudiger parsing.
Je code definieert een object (data
) met daarin een array (items
) van objecten (elk met een id
, name
, en type
).
Je hebt hiervoor geen jQuery nodig of nodig, alleen JavaScript.
Een item toevoegen:
data.items.push(
{id: "7", name: "Douglas Adams", type: "comedy"}
);
Dat voegt toe aan het einde. Zie hieronder voor toevoegen in het midden.
Verwijder een item:
Er zijn verschillende manieren. De splice
methode is de meest veelzijdige:
data.items.splice(1, 3); // Removes three items starting with the 2nd,
// ("Witches of Eastwick", "X-Men", "Ordinary People")
splice
wijzigt de oorspronkelijke array, en geeft een array terug met de items die je verwijderd hebt.
Toevoegen in het midden:
splice
doet eigenlijk zowel toevoegen als verwijderen. De signatuur van de splice
methode is:
removed_items = arrayObject.splice(index, num_to_remove[, add1[, add2[, ...]]]);
index
- de index waar de veranderingen moeten beginnennum_to_remove
- beginnend met die index, zoveel items verwijderenaddN
- ...en dan deze elementen invoegenDus ik kan een item toevoegen op de 3e positie, zoals dit:
data.items.splice(2, 0,
{id: "7", name: "Douglas Adams", type: "comedy"}
);
Wat dat zegt is: Begin bij index 2, verwijder nul items, en voeg dan dit volgende item in. Het resultaat ziet er zo uit:
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"}
]};
Je kunt er in één keer een aantal verwijderen en een aantal toevoegen:
data.items.splice(1, 3,
{id: "7", name: "Douglas Adams", type: "comedy"},
{id: "8", name: "Dick Francis", type: "mystery"}
);
...wat betekent: Begin bij index 1, verwijder drie items, voeg dan deze twee items toe. Wat resulteert in:
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"}
]};
Dat's helemaal geen JSON, het's gewoon Javascript objecten. JSON is een tekstrepresentatie van gegevens, die een subset van de Javascript syntaxis gebruikt.
De reden dat je'geen informatie kunt vinden over het manipuleren van JSON met behulp van jQuery is omdat jQuery niets heeft dat dat kan, en het'wordt over het algemeen helemaal niet gedaan. Je manipuleert de gegevens in de vorm van Javascript objecten, en maakt er dan een JSON string van als dat is wat je nodig hebt. (jQuery heeft wel methodes voor de conversie).
Wat je hebt is gewoon een object dat een array bevat, dus je kunt alle kennis gebruiken die je al hebt. Gebruik gewoon data.items
om toegang te krijgen tot de array.
Bijvoorbeeld, om een ander item aan de array toe te voegen met behulp van dynamische waarden:
// 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);