Dodajanje/odstranjevanje elementov iz predmeta JavaScript s programom jQuery

Imam naslednji predmet JavaScript:

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

Če bi želel na ta seznam dodati/odstraniti elemente, kako bi to storil z uporabo jQueryja? Stranka želi, da se ta seznam dinamično spreminja.

Rešitev

Prvič, vaša citirana koda ni ne JSON. Vaša koda je objektni dobesedni zapis v jeziku JavaScript. [JSON][1] je podmnožica tega zapisa, namenjena lažjemu razčlenjevanju.

Vaša koda opredeljuje objekt (data), ki vsebuje polje (items) objektov (vsak z id, name in type).

Za to ne potrebujete ali želite jQueryja, ampak samo JavaScript.

Dodajanje elementa:

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

To se doda na konec. Za dodajanje na sredino glej spodaj.

Odstranjevanje elementa:

Obstaja več načinov. Metoda [splice][2] je najbolj vsestranska:

data.items.splice(1, 3); // Removes three items starting with the 2nd,
                         // ("Witches of Eastwick", "X-Men", "Ordinary People")

splice spremeni prvotno polje in vrne polje odstranjenih elementov.

Pridajanje na sredini:

splice dejansko opravi tako dodajanje kot odstranjevanje. Podpis metode splice je:

removed_items = arrayObject.splice(index, num_to_remove[, add1[, add2[, ...]]]);
  • index - indeks, pri katerem se začnejo spremembe
  • število_za_odstranitev - začenši s tem indeksom, odstrani tolikšno število vnosov
  • addN - ...in nato vstavi te elemente

Tako lahko dodam element na 3. mesto na naslednji način:

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

To pomeni: Začni z indeksom 2, odstrani nič elementov in nato vstavi naslednji element. Rezultat je videti takole:


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

To sploh ni JSON, ampak samo objekti Javascript. JSON je besedilna predstavitev podatkov, ki uporablja podmnožico sintakse Javascript.

Razlog, da ne najdete nobenih informacij o ravnanju z JSON z uporabo programa jQuery, je v tem, da program jQuery nima ničesar, kar bi to omogočalo, in da se to na splošno sploh ne počne. S podatki manipulirate v obliki objektov Javascript in jih nato spremenite v niz JSON, če to potrebujete. (Vendar ima jQuery metode za pretvorbo.)

Kar imate, je preprosto objekt, ki vsebuje polje, zato lahko uporabite vse znanje, ki ga že imate. Za dostop do polja uporabite data.items.

Če želite na primer dodati še en element v polje z uporabo dinamičnih vrednosti:

// 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);
Komentarji (0)

To je le objekt javascript, zato lahko z datotekami data.items upravljate enako kot z običajnim poljem. Če to storite:

data.items.pop();

bo vaše polje items krajše za 1 element.

Komentarji (0)