JQuery ile bir JavaScript nesnesinden öğe ekleme / kaldırma

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 bu işi nasıl yaparım? Müşteri bu listenin dinamik olarak değiştirilebilir olmasını istiyor.

Öncelikle, alıntılanan kodunuz JSON değil . Kodunuz, JavaScript nesnesi değişmez gösterimidir. JSON , daha kolay ayrıştırma için tasarlanmış bir alt kümedir.

İşletme Kod, nesnenin (tanımlayan databir dizi (ihtiva eden) itemsnesnelerin) (bir, her biri id, nameve type).

Bunun için jQuery'ye ihtiyacınız yok veya istemiyorsunuz, sadece JavaScript.

Bir öğe eklemek:

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

Bu sona ekler. Ortaya eklemek için aşağıya bakın.

Bir öğeyi kaldırmak:

Birkaç yol var. spliceYöntem en çok yönlüdür:

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 kaldırdığınız öğelerin bir dizisini döndürür.

Ortaya ekleyerek:

spliceaslında hem ekleme hem de kaldırma işlemi yapar. spliceYöntemin imzası :

removed_items = arrayObject.splice(index, num_to_remove[, add1[, add2[, ...]]]);

• index - değişiklik yapmaya başlayacağınız dizin
• num_to_remove - bu dizinden başlayarak, bu kadar çok girişi kaldırın
• addN - ... ve sonra bu öğeleri ekleyin

Böylece 3. pozisyona şöyle bir öğe ekleyebilirim:

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

Bunun anlamı şudur: Dizin 2'den başlayarak, sıfır öğeleri kaldırın ve ardından aşağıdaki öğeyi ekleyin. Sonuç şuna benzer:

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ı kaldırıp aynı anda ekleyebilirsiniz:

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

... bunun anlamı: Dizin 1'den başlayarak, üç girişi kaldırın ve ardından bu iki girişi ekleyin. Hangi sonuç:

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

Ekleme iyidir, herkes eklemeyi açıklar, ben de açıklamadım. Ayrıca JavaScript'te delete anahtar kelimesini de kullanabilirsiniz , bu iyidir. Bunu jQuery kullanarak işlemek için $ .grep kullanabilirsiniz .

JQuery Yolu:

data.items = jQuery.grep(
                data.items, 
                function (item,index) { 
                  return item.id !=  "1"; 
                });

SİL Yolu:

delete data.items[0]

PUSH eklemek için ekleme daha iyidir çünkü ekleme ağır ağırlıklı bir işlevdir. Splice yeni bir dizi oluşturun, eğer çok büyük bir diziniz varsa o zaman sorun yaratabilir. delete bazen yararlıdır, sildikten sonra dizinin uzunluğunu ararsanız, orada uzunlukta bir değişiklik olmaz. Bu yüzden akıllıca kullanın.

JQuery kullanıyorsanız, yeni öğeler eklemek için genişletme işlevini kullanabilirsiniz.

var olddata = {"fruit":{"apples":10,"pears":21}};

var newdata = {};
newdata['vegetables'] = {"carrots": 2, "potatoes" : 5};

$.extend(true, olddata, newdata);

Bu şunları üretecektir:

{"fruit":{"apples":10,"pears":21}, "vegetables":{"carrots":2,"potatoes":5}};

Bu hiç JSON değil, sadece Javascript nesneleri. JSON , Javascript sözdiziminin bir alt kümesini kullanan, verilerin metin temsilidir.

JSON'u jQuery kullanarak düzenleme 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 biçiminde işlersiniz ve ardından ihtiyacınız olan şey buysa, bir JSON dizesine dönüştürürsünüz. (jQuery'nin dönüştürme için yöntemleri vardır.)

Sahip olduğunuz şey basitçe bir dizi içeren bir nesnedir, böylece zaten sahip olduğunuz tüm bilgileri kullanabilirsiniz. Sadece kullandata.itemsDiziye erişmek için .

Ö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);

Bir json dizisine nesne ekleme

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

Bir nesneyi json'dan kaldırma

Benim için çalışıyor.

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

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

Bu nesne olmadan bir dizi döndürür.

Umarım yardımcı olur.

Bu sadece bir javascript nesnesi, yani data.itemssıradan bir dizi gibi işleyebilirsiniz . Yaparsan:

data.items.pop();

senin itemsdizi 1 öğe daha kısa olacaktır.

İşleri basit tutun :)

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

Bu yardımcı olur umarım!

Deneyin

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);