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

82

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.

Bug Magnet
quelle
2
Dies ist kein JSON. Dies ist ein Objektliteral: benalman.com/news/2010/03/theres-no-such-thing-as-a-json ( und der Kreuzzug gegen JSON-Objekte geht weiter .... )
Felix Kling
4
@ Matt: In der Tat. Nun, JSON ist ein Textdatenformat. Und der in Anführungszeichen gesetzte Code wäre nicht JSON, selbst wenn er in einer Zeichenfolge enthalten wäre (da JSON doppelte Anführungszeichen für Eigenschaftsnamen erfordert).
TJ Crowder
6
Danke, dass du mich aufgeklärt hast. Es sieht aber sicher aus wie ein JSON-Objekt! Danke noch einmal!
Bug Magnet
3
@Bug: Die JSON-Notation für {items: []}würde folgendermaßen aussehen : {"items": []}. Es ist nicht ganz dasselbe (nur sehr ähnlich; auch hier ist JSON eine Teilmenge dessen, was Sie verwenden, nämlich die Objektliteralnotation). Wenn Sie JSON deserialisieren , ist das Ergebnis ein Objektdiagramm (z. B. in JavaScript ist es ein JavaScript-Objekt).
TJ Crowder

Antworten:

220

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"}
]};
TJ Crowder
quelle
Hallo, wenn ich die Anzahl der Elemente in den Objektdaten bestimmen wollte, damit ich beim Pushen neuer Elemente dynamisch 'id' definieren kann. wie würde ich das machen
Hudson Atwell
@ HudsonAtwell: data.itemsist ein Array. Arrays haben eine lengthEigenschaft. :-)
TJ Crowder
Wenn ich den Push mache, bekomme ich immer "... hat keinen Methoden-Push". Hmm ... Kann nicht herausfinden, was falsch ist ...
Sliq
@TJCrowder ist es möglich , zu entfernen id = 5und kann auch das Update namefür id=6zuToy
Mourya
Wenn das JSON-Objekt auf ein JSON-Objekt anstatt auf ein Array übertragen werden muss, verwenden Sie $ .exetend, wie von Peter Drinnans unten angegeben. stackoverflow.com/a/17976034/2466650
Sai
19

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.

Imrul
quelle
Was versuchst du im letzten Absatz zu sagen? Es ist so neblig, ich habe nichts verstanden.
Decebal
1
vode runter! für sein nicht löschen machen Sie einfach undefinierten verwandten Index
13

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}};
Peter Drinnan
quelle
8

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);
Guffa
quelle
5

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.

Siva Anand
quelle
3

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.

Stacheliger Norman
quelle
1

Halte die Dinge einfach :)

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

Hoffe das hilft!

Talha
quelle
0

Versuchen

data.items.pop();
data.items.push({id: "7", name: "Matrix", type: "adult"});

Kamil Kiełczewski
quelle