dodawanie/usuwanie pozycji z danymi JSON z JQuery

Question

Mam obiektu JSON następująco:

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 do tej listy, jak bym go o to przy użyciu jQuery? Wiem, że mogę to zrobić całkiem łatwo, jeśli po prostu użyjemy tablicy, ale poprzedni programista zbudował już kod przy użyciu JSON, a teraz klient zmienił zdanie w ostatniej chwili i chce dynamicznie modyfikować tę listę. Chcę zaoszczędzić czas przed ponownym napisaniem całego kodu, aby użyć tablic zamiast JSON, więc zastanawiam się, czy ktoś wie, jak to zrobić, ponieważ nie mogę znaleźć wielu informacji o tym, jak manipulować JSONem z JQuery w dowolnym miejscu w Internecie.

Wielkie dzięki!

Answer 1

Po pierwsze, podany kod to , a nie JSON. Twój kod to notacja literalna obiektu JavaScript. JSON jest podzbiorem tego zaprojektowanego do łatwiejszego parsowania.

Kod określa obiekt (data) zawierający tablicę (items) przedmiotów (każdy z id, name i type).

Nie potrzebujesz ani nie potrzebujesz jQuery, tylko JavaScript.

Dodawanie pozycji:

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

który dodaje do końca. Zobacz poniżej, aby dodać w środku.

Usuwanie elementu:

Istnieje kilka sposobów. Metoda splice jest najbardziej wszechstronny:

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

splice zmienia oryginalnej tablicy i zwraca tablicę elementów, które usunięte.

Dodawanie w środku:

splice faktycznie robi zarówno dodawanie i usuwanie. Podpis metody splice jest:

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

• index - indeks, w którym do rozpoczęcia dokonywania zmian
• num_to_remove - od tego indeksu, usuń to wiele wpisów
• addN - ...a następnie wstawić te elementy

Więc mogę dodać element w 3. pozycji tak:

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

Co to mówi to: od indeksu 2, usunąć zerowe elementy, a następnie wstawić ten po pozycja. Wynik wygląda tak:

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ć kilka naraz:

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

... co oznacza: od indeksie 1, usunąć trzy pozycje, a następnie dodać te dwa wpisy . Co powoduje:

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

Answer 2

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

data.items.pop(); 

Twoja tablica items będzie o 1 raz krótsza.

Answer 3

To wcale nie jest JSON, to tylko obiekty JavaScript. JSON to tekstowa reprezentacja danych, która używa podzestawu składni Javascript.

Powodem, dla którego nie można znaleźć żadnych informacji o manipulowaniu JSON-em 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 przekształcasz je w ciąg JSON, jeśli jest to potrzebne. (jQuery ma jednak metody konwersji).

To, co masz, to po prostu obiekt zawierający tablicę, dzięki czemu możesz wykorzystać całą wiedzę, którą już posiadasz. Po prostu użyj data.items, aby 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); 

Answer 4

Splice jest dobry, każdy wyjaśnić splot więc nie wyjaśnić. Możesz także użyć słowa kluczowego delete w JavaScript, to dobrze. Można również użyć $.grep do manipulowania przy użyciu jQuery.

jQuery Way:

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

DELETE Way:

delete data.items[0] 

do dodawania PUSH jest lepsza spawów, ponieważ funkcja splice jest ciężki ważona. Splice tworzą nową tablicę, jeśli masz ogromny rozmiar tablicy, 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.

Answer 5

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

Answer 6

Dodanie obiektu w tablicy json

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

Usuwanie obiektu z JSON

It pracownika 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 pomaga.