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から始めて、ゼロのアイテムを削除してから、次のアイテムを挿入します。結果は次のようになります。

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

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

jQueryの方法：

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

削除方法：

delete data.items[0]

スプライスは重み関数であるため、PUSHを追加する場合はスプライスの方が適しています。スプライスは新しい配列を作成します。配列のサイズが大きい場合は、面倒な場合があります。削除が役立つ場合があります。削除後、配列の長さを検索すると、長さは変わりません。賢く使ってください。

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

これは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);

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

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

それが役に立てば幸い。

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

data.items.pop();

あなたのitems配列は、1つの項目短くなります。

物事をシンプルにしてください:)

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

お役に立てれば！

試してみてください

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