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"}
]};
Wie würde ich mit jQuery vorgehen, wenn ich dieser Liste Elemente hinzufügen/entfernen wollte? Der Kunde möchte, dass diese Liste dynamisch modifizierbar ist.
Zunächst einmal ist Ihr zitierter Code nicht JSON. Ihr Code ist die JavaScript-Objektliteralnotation. JSON ist eine Untermenge davon, die zur leichteren Analyse entwickelt wurde.
Ihr Code definiert ein Objekt (data
), das ein Array (items
) von Objekten enthält (jedes mit einer id
, name
und type
).
Sie brauchen oder wollen kein jQuery dafür, nur JavaScript.
Ein Element hinzufügen:
data.items.push(
{id: "7", name: "Douglas Adams", type: "comedy"}
);
Das fügt am Ende hinzu. Siehe unten für das Hinzufügen in der Mitte.
Entfernen eines Artikels:
Es gibt mehrere Möglichkeiten. Die splice
Methode ist die vielseitigste:
data.items.splice(1, 3); // Removes three items starting with the 2nd,
// ("Witches of Eastwick", "X-Men", "Ordinary People")
splice
verändert das ursprüngliche Array und gibt ein Array mit den entfernten Elementen zurück.
Hinzufügen in der Mitte:
splice
macht eigentlich beides, Hinzufügen und Entfernen. Die Signatur der splice
Methode ist:
removed_items = arrayObject.splice(index, num_to_remove[, add1[, add2[, ...]]]);
index
- der Index, bei dem die Änderungen beginnen sollennum_to_remove
- beginnend mit diesem Index, so viele Einträge entfernenaddN
- ...und dann diese Elemente einfügenSo kann ich ein Element an der 3. Position hinzufügen:
data.items.splice(2, 0,
{id: "7", name: "Douglas Adams", type: "comedy"}
);
Das bedeutet Folgendes: Beginnend bei Index 2 werden null Elemente entfernt und dann das folgende Element eingefügt. Das Ergebnis sieht wie folgt 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 gleichzeitig einige Elemente entfernen und einige hinzufügen:
data.items.splice(1, 3,
{id: "7", name: "Douglas Adams", type: "comedy"},
{id: "8", name: "Dick Francis", type: "mystery"}
);
...was bedeutet: Beginnen Sie bei Index 1, entfernen Sie drei Einträge und fügen Sie dann diese beiden Einträge hinzu. Das Ergebnis ist:
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"}
]};
Das ist gar kein JSON, sondern nur ein Javascript-Objekt. JSON ist eine Textdarstellung von Daten, die eine Teilmenge der Javascript-Syntax verwendet.
Der Grund dafür, dass Sie keine Informationen über die Bearbeitung von JSON mit jQuery finden können, ist, dass jQuery nichts hat, was das kann, und dass es im Allgemeinen überhaupt nicht gemacht wird. Sie manipulieren die Daten in Form von Javascript-Objekten und wandeln sie dann in eine JSON-Zeichenkette um, wenn Sie das brauchen. (jQuery hat allerdings Methoden für die Umwandlung).
Was Sie haben, ist einfach ein Objekt, das ein Array enthält, so dass Sie all das Wissen nutzen können, das Sie bereits haben. Verwenden Sie einfach data.items
, um auf das Array zuzugreifen.
Zum Beispiel, um ein weiteres Element zu dem Array mit dynamischen Werten hinzuzufügen:
// 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);
Nun, es ist nur ein Javascript-Objekt, so dass Sie data.items
genau wie ein gewöhnliches Array manipulieren können. Wenn Sie das tun:
data.items.pop();
wird Ihr items
-Array um 1 Element kürzer sein.