Dodawanie / usuwanie elementów z obiektu JavaScript za pomocą jQuery

Mam następujący obiekt 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"}
]};

Gdybym chciał dodać / usunąć elementy z tej listy, jak bym to zrobił używając jQuery? Klient chce, aby ta lista była dynamicznie modyfikowana.

Po pierwsze, cytowany kod nie jest JSON. Twój kod jest notacją literału obiektu JavaScript. JSON jest podzbiorem tego, który został zaprojektowany w celu łatwiejszego analizowania.

Kod określa przedmiot ( data), zawierającą zestaw ( itemsI) przedmiotów (każdy z id, namei type).

Nie potrzebujesz ani nie chcesz do tego celu jQuery, tylko JavaScript.

Dodawanie pozycji:

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

To się kończy. Zobacz poniżej, aby dodać w środku.

Usuwanie przedmiotu:

Jest kilka sposobów. spliceMetoda jest najbardziej wszechstronny:

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

splice modyfikuje oryginalną tablicę i zwraca tablicę usuniętych elementów.

Dodanie w środku:

splicew rzeczywistości dodaje i usuwa. Podpis splicemetody to:

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

• index - indeks, od którego należy rozpocząć wprowadzanie zmian
• num_to_remove - zaczynając od tego indeksu, usuń tyle wpisów
• addN - ... a następnie wstaw te elementy

Mogę więc dodać element na trzeciej pozycji w ten sposób:

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

Oznacza to: zaczynając od indeksu 2, usuń zero elementów, a następnie wstaw następujący element. Wynik wygląda następująco:

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

Możesz usunąć niektóre i dodać od razu:

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

... co oznacza: zaczynając od indeksu 1, usuń trzy wpisy, a następnie dodaj te dwa wpisy. Co skutkuje w:

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

Splot jest dobry, wszyscy wyjaśniają splot, więc nie wyjaśniłem tego. Możesz także użyć słowa kluczowego delete w JavaScript, to dobrze. Możesz użyć $ .grep również do manipulowania tym za pomocą jQuery.

Sposób jQuery:

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

USUŃ sposób:

delete data.items[0]

Do dodania PUSH jest lepsze połączenie, ponieważ połączenie jest funkcją ciężko ważoną. Splice tworzą nową tablicę, jeśli masz ogromną tablicę, może to być kłopotliwe. delete jest czasami przydatne, po usunięciu, jeśli szukasz długości tablicy, nie ma tam żadnej zmiany długości. Więc używaj go mądrze.

Jeśli używasz jQuery, możesz użyć funkcji rozszerzania, aby dodać nowe elementy.

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

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

$.extend(true, olddata, newdata);

To wygeneruje:

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

To wcale nie jest JSON, to tylko obiekty JavaScript. JSON to tekstowa reprezentacja danych, która wykorzystuje podzbiór składni JavaScript.

Powodem, dla którego nie możesz znaleźć żadnych informacji o manipulowaniu JSON za pomocą jQuery, jest to, że jQuery nie ma nic, co mogłoby to zrobić, i generalnie nie jest to w ogóle wykonywane. Manipulujesz danymi w postaci obiektów JavaScript, a następnie zamieniasz je na ciąg JSON, jeśli tego potrzebujesz. (Jednak jQuery ma metody konwersji).

To, co masz, to po prostu obiekt, który zawiera tablicę, więc możesz wykorzystać całą wiedzę, którą już posiadasz. Po prostu użyj, data.itemsaby uzyskać dostęp do tablicy.

Na przykład, aby dodać kolejny element do tablicy przy użyciu wartości dynamicznych:

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

Dodawanie obiektu do tablicy JSON

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

Usuwanie obiektu z pliku JSON

Pracuje dla mnie.

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

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

Zwraca tablicę bez tego obiektu.

Mam nadzieję, że to pomoże.

Cóż, to tylko obiekt javascript, więc możesz manipulować data.itemstak jak zwykłą tablicą. Jeśli zrobisz:

data.items.pop();

Twoja itemstablica będzie o 1 element krótsza.

Zachowaj prostotę :)

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

Mam nadzieję że to pomoże!

Próbować

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