Aşağıdaki gibi bir JavaScript nesnem var:
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"}
]};
Bu listeye öğe eklemek/kaldırmak isteseydim, jQuery kullanarak bunu nasıl yapardım? Müşteri bu listenin dinamik olarak değiştirilebilir olmasını istiyor.
Öncelikle, alıntıladığınız kod JSON değil. Kodunuz JavaScript nesne gerçek gösterimidir. JSON daha kolay ayrıştırma için tasarlanmış bir alt kümesidir.
Kodunuz, nesnelerden oluşan bir dizi (items
) içeren bir nesne (data
) tanımlar (her biri bir id
, name
ve type
ile).
Bunun için jQuery'ye ihtiyacınız yok veya bunu istemiyorsunuz, sadece JavaScript.
Bir öğe ekleme:
data.items.push(
{id: "7", name: "Douglas Adams", type: "comedy"}
);
Bu sonuna ekler. Ortaya eklemek için aşağıya bakın.
Bir öğeyi kaldırma:
Bunun birkaç yolu var. En çok yönlü olanı splice
yöntemidir:
data.items.splice(1, 3); // Removes three items starting with the 2nd,
// ("Witches of Eastwick", "X-Men", "Ordinary People")
splice` orijinal diziyi değiştirir ve çıkardığınız öğelerden oluşan bir dizi döndürür.
Ortaya ekleme:
spliceaslında hem ekleme hem de çıkarma yapar. splice
yönteminin imzası şöyledir:
removed_items = arrayObject.splice(index, num_to_remove[, add1[, add2[, ...]]]);
index
- değişiklik yapmaya başlayacağınız dizinnum_to_remove
- bu dizinden başlayarak şu kadar girdiyi kaldırınaddN
- ...ve ardından bu öğeleri ekleyinBöylece 3. konuma şu şekilde bir öğe ekleyebilirim:
data.items.splice(2, 0,
{id: "7", name: "Douglas Adams", type: "comedy"}
);
Bu ne demek oluyor? Dizin 2'den başlayarak sıfır öğeyi kaldırın ve ardından bu aşağıdaki öğeyi ekleyin. Sonuç şöyle görünür:
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"}
]};
Bazılarını çıkarabilir ve bazılarını aynı anda ekleyebilirsiniz:
data.items.splice(1, 3,
{id: "7", name: "Douglas Adams", type: "comedy"},
{id: "8", name: "Dick Francis", type: "mystery"}
);
...bu da demek oluyor ki: Dizin 1'den başlayarak üç girişi kaldırın, ardından bu iki girişi ekleyin. Bu da şu sonucu verir:
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"}
]};
Bu JSON değil, sadece Javascript nesneleri. JSON, Javascript sözdiziminin bir alt kümesini kullanan bir veri metin gösterimidir.
JQuery kullanarak JSON'u manipüle etme hakkında herhangi bir bilgi bulamamanızın nedeni, jQuery'nin bunu yapabilecek hiçbir şeye sahip olmaması ve genellikle hiç yapılmamasıdır. Verileri Javascript nesneleri şeklinde manipüle edersiniz ve daha sonra ihtiyacınız olan şey buysa bunu bir JSON dizesine dönüştürürsünüz. (Yine de jQuery'nin dönüştürme için yöntemleri vardır).
Sahip olduğunuz şey sadece bir dizi içeren bir nesnedir, böylece zaten sahip olduğunuz tüm bilgileri kullanabilirsiniz. Diziye erişmek için sadece data.items
kullanın.
Örneğin, dinamik değerler kullanarak diziye başka bir öğe eklemek için:
// 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);