Hinzufügen / Entfernen von Elementen zu einem JavaScript-Objekt mit jQuery

Ich habe ein JavaScript-Objekt wie folgt:

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

Wenn ich dieser Liste Elemente hinzufügen / entfernen möchte, wie würde ich mit jQuery vorgehen? Der Client möchte, dass diese Liste dynamisch geändert werden kann.

Zunächst einmal ist Ihr zitierter Code nicht JSON. Ihr Code ist die JavaScript-Objektliteralnotation. JSON ist eine Teilmenge von JSON , die zum einfacheren Parsen entwickelt wurde.

Ihr Code definiert ein Objekt ( data) , das ein Array ( items) von Objekten (jeweils mit einem id, nameund type).

Sie brauchen oder wollen dafür kein jQuery, nur JavaScript.

Hinzufügen eines Elements:

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

Das trägt zum Ende bei. Siehe unten für das Hinzufügen in der Mitte.

Einen Gegenstand entfernen:

Es gibt verschiedene Möglichkeiten. Die spliceMethode ist die vielseitigste:

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

splice Ändert das ursprüngliche Array und gibt ein Array der entfernten Elemente zurück.

Hinzufügen in der Mitte:

spliceTatsächlich werden sowohl hinzugefügt als auch entfernt. Die Signatur der spliceMethode lautet:

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

• index - der Index, ab dem Änderungen vorgenommen werden sollen
• num_to_remove - Entfernen Sie beginnend mit diesem Index so viele Einträge
• addN - ... und dann diese Elemente einfügen

So kann ich einen Artikel an der 3. Position wie folgt hinzufügen:

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

Das heißt: Ab Index 2 entfernen Sie null Elemente und fügen Sie dann das folgende Element ein. Das Ergebnis sieht folgendermaßen aus:

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

Sie können einige entfernen und einige sofort hinzufügen:

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

... was bedeutet: Ab Index 1 drei Einträge entfernen und diese beiden Einträge hinzufügen. Was in ... endet:

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

Spleißen ist gut, jeder erklärt Spleißen, also habe ich es nicht erklärt. Sie können das Schlüsselwort delete auch in JavaScript verwenden. Es ist gut. Sie können $ .grep auch verwenden, um dies mit jQuery zu bearbeiten .

Der jQuery-Weg:

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

DELETE Way:

delete data.items[0]

Zum Hinzufügen von PUSH ist der Spleiß besser, da der Spleiß eine schwergewichtige Funktion hat. Splice erstellt ein neues Array. Wenn Sie eine große Arraygröße haben, kann dies problematisch sein. Löschen ist manchmal nützlich. Wenn Sie nach dem Löschen nach der Länge des Arrays suchen, ändert sich dort keine Länge. Verwenden Sie es also mit Bedacht.

Wenn Sie jQuery verwenden, können Sie die Erweiterungsfunktion verwenden, um neue Elemente hinzuzufügen.

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

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

$.extend(true, olddata, newdata);

Dies erzeugt:

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

Das ist überhaupt nicht JSON, es sind nur Javascript-Objekte. JSON ist eine Textdarstellung von Daten, die eine Teilmenge der Javascript-Syntax verwendet.

Der Grund dafür, dass Sie keine Informationen zum Manipulieren von JSON mit jQuery finden können, ist, dass jQuery über nichts verfügt, was dies kann, und dass dies im Allgemeinen überhaupt nicht erfolgt. Sie bearbeiten die Daten in Form von Javascript-Objekten und wandeln sie dann in eine JSON-Zeichenfolge um, wenn Sie dies benötigen. (jQuery verfügt jedoch über Methoden für die Konvertierung.)

Was Sie haben, ist einfach ein Objekt, das ein Array enthält, sodass Sie das gesamte Wissen nutzen können, das Sie bereits haben. Verwenden Sie einfach, data.itemsum auf das Array zuzugreifen.

So fügen Sie dem Array beispielsweise ein weiteres Element mit dynamischen Werten hinzu:

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

Hinzufügen eines Objekts in einem JSON-Array

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

Entfernen eines Objekts aus einem JSON

Es funktioniert für mich.

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

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

Es gibt ein Array ohne dieses Objekt zurück.

Ich hoffe es hilft.

Nun, es ist nur ein Javascript-Objekt, sodass Sie es data.itemswie ein gewöhnliches Array bearbeiten können. Wenn Sie tun:

data.items.pop();

Ihr itemsArray wird 1 Element kürzer sein.

Halte die Dinge einfach :)

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

Hoffe das hilft!

Versuchen

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