82

次のような 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 を使用してどうすればよいでしょうか? クライアントは、このリストを動的に変更できるようにしたいと考えています。

4

8 に答える 8

223

まず、引用されたコードはJSONではありません。コードは JavaScript オブジェクト リテラル表記です。JSONは、解析を容易にするために設計された 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"}
]};
于 2010-12-27T11:18:26.650 に答える
19

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

jQuery の方法:

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

削除方法:

delete data.items[0]

スプライスを追加するには、スプライスの方が優れています。これは、スプライスが重み付けされた関数であるためです。Splice で新しい配列を作成します。配列のサイズが大きい場合は、面倒な場合があります。削除後、配列の長さを探すと、長さに変化はありません。だから賢く使ってください。

于 2010-12-27T11:28:09.673 に答える
8

これは 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);
于 2010-12-27T11:18:59.643 に答える
3

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

data.items.pop();

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

于 2010-12-27T11:15:10.440 に答える
0

試す

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

于 2019-04-16T05:39:04.253 に答える