web-dev-qa-db-ja.com

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を使用してどのようにしますか。クライアントはこのリストが動的に変更可能であることを望んでいます。

javascriptjqueryobject-literal
82
Bug Magnet

まず、引用符で囲まれたコードはnot 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から始めて、ゼロ個のアイテムを削除してから、次のアイテムを挿入します。結果は次のようになります。

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"}
]};
216
T.J. Crowder

スプライス 良いです、誰もがスプライスを説明するので私はそれを説明しませんでした。 JavaScriptでdeleteキーワードを使うこともできます。 jQueryを使ってこれを操作するために $。grep を使うこともできます。

JQueryの方法：

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

DELETEウェイ：

delete data.items[0]

スプライスは重い重み付け関数であるため、プッシュを追加するにはスプライスの方が適しています。あなたが巨大なサイズの配列を持っているならば、それは面倒かもしれません。 deleteは配列の長さを探すのであればdeleteの後には有用な場合があり、そこでは長さに変化はありません。だから賢く使ってください。

19
Imrul

JQueryを使用している場合は、extend関数を使用して新しい項目を追加することができます。

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

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

$.extend(true, olddata, newdata);

これは生成します：

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

それはまったくJSONではありません、それはただのJavascriptオブジェクトです。 JSON はデータのテキスト表現で、Javascript構文のサブセットを使用します。

JQueryを使ってJSONを操作することに関する情報を見つけることができないのは、jQueryにはそれを可能にするものが何もないためで、一般的にはまったく行われません。 Javascriptオブジェクトの形式でデータを操作し、それが必要な場合はJSON文字列に変換します。 （jQueryには変換のためのメソッドがあります。）

あなたが持っているものは、単に配列を含むオブジェクトですので、あなたはすでに持っているすべての知識を使うことができます。配列にアクセスするにはdata.itemsを使うだけです。

たとえば、動的値を使用して別の項目を配列に追加するには、次のようにします。

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

それはただのJavaScriptオブジェクトなので、普通の配列と同じようにdata.itemsを操作できます。もしあなたがそうするなら：

data.items.pop();

items配列は1アイテム短くなります。

3
Spiny Norman

JSON配列にオブジェクトを追加する

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

JSONからオブジェクトを削除する

それは私のために働きます。

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

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

そのオブジェクトのない配列を返します。

それが役に立てば幸い。

2
Siva Anand

物事をシンプルに保つ:)

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

お役に立てれば！

0
Talha

やってみる

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);
0
Kamil Kiełczewski