[解決済み] jQueryでJavaScriptオブジェクトから項目を追加/削除する

質問

以下のような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"}
]};

このリストに項目を追加/削除したい場合、jQueryを使用してどのように行えばよいでしょうか？クライアントは、このリストが動的に変更可能であることを望んでいます。

どのように解決するのですか？

まず、あなたの引用したコードは ではなく JSONです。あなたのコードはJavaScriptオブジェクトリテラル記法です。 JSON は、パースしやすいように設計されたそのサブセットです。

あなたのコードでは、オブジェクト ( data ) を定義し、その中に配列 ( items ) のオブジェクトの配列 (各オブジェクトには id , name そして type ).

これにはjQueryは必要なく、JavaScriptだけでいいのです。

項目を追加する。

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

これで末尾に追加されます。途中で追加する場合は下記を参照してください。

項目を削除する。

いくつかの方法があります。その splice メソッドは最も汎用性の高いものです。

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

splice は元の配列を変更し、削除した項目の配列を返します。

途中で追加する。

splice は実際には追加と削除の両方を行います。のシグネチャは splice メソッドは

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

• index - 変更を開始するインデックス
• num_to_remove - そのインデックスから始めて、これだけのエントリを削除します。
• addN - ...そして、これらの要素を挿入します。

というわけで、こんな感じで3番目の位置に項目を追加することができます。

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

その内容はというと インデックス2から始めて、0個の項目を削除し、次の項目を挿入します。結果はこのようになります。

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

一度にいくつかを削除し、いくつかを追加することができます。

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

...ということです。インデックス1から始めて、3つのエントリを削除し、次にこれら2つのエントリを追加します。という結果になります。

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