Jeg har et JavaScript-objekt som følger:
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"}
]};
Hvis jeg ønsker å legge til/fjerne elementer i denne listen, hvordan gjør jeg det ved hjelp av jQuery? Kunden ønsker at denne listen skal kunne endres dynamisk.
For det første er den siterte koden din ikke JSON. Koden din er JavaScript object literal notation. JSON er en delmengde av dette som er utviklet for enklere parsing.
Koden din definerer et objekt (data
) som inneholder en matrise (items
) av objekter (hver med et id
, name
og type
).
Du trenger eller ønsker ikke jQuery for dette, bare JavaScript.
**Legge til et objekt
data.items.push(
{id: "7", name: "Douglas Adams", type: "comedy"}
);
Som legges til på slutten. Se nedenfor for å legge til i midten.
**Fjerning av et element
Det finnes flere måter. Metoden `splice
er den mest allsidige:
data.items.splice(1, 3); // Removes three items starting with the 2nd,
// ("Witches of Eastwick", "X-Men", "Ordinary People")
splice
endrer den opprinnelige matrisen og returnerer en matrise med elementene du fjernet.
Legge til i midten:
splice
gjør faktisk både å legge til og fjerne. Signaturen til metoden splice
er:
removed_items = arrayObject.splice(index, num_to_remove[, add1[, add2[, ...]]]);
index
- indeksen der du skal begynne å gjøre endringernum_to_remove
- starter med denne indeksen og fjerner så mange oppføringer.addN
- ...og sett deretter inn disse elementeneSå jeg kan legge til et element i 3. posisjon på denne måten:
data.items.splice(2, 0,
{id: "7", name: "Douglas Adams", type: "comedy"}
);
Det betyr følgende: Begynn ved indeks 2, fjern null elementer, og sett deretter inn følgende element. Resultatet ser slik ut:
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"}
]};
Du kan fjerne noen og legge til noen samtidig:
data.items.splice(1, 3,
{id: "7", name: "Douglas Adams", type: "comedy"},
{id: "8", name: "Dick Francis", type: "mystery"}
);
...som betyr: Begynn med indeks 1, fjern tre oppføringer, og legg deretter til disse to oppføringene. Det gir følgende resultat:
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"}
]};
Det er ikke JSON i det hele tatt, det er bare Javascript-objekter. JSON er en tekstrepresentasjon av data som bruker en delmengde av Javascript-syntaksen.
Grunnen til at du ikke finner informasjon om hvordan du manipulerer JSON ved hjelp av jQuery, er at jQuery ikke har noe som kan gjøre det, og at det vanligvis ikke gjøres i det hele tatt. Du manipulerer dataene i form av Javascript-objekter og gjør dem deretter om til en JSON-streng hvis det er det du trenger. (jQuery har imidlertid metoder for konverteringen).
Det du har, er rett og slett et objekt som inneholder en matrise, slik at du kan bruke all den kunnskapen du allerede har. Bare bruk data.items
for å få tilgang til matrisen.
For eksempel for å legge til et nytt element i matrisen ved hjelp av dynamiske verdier:
// 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);