jQueryでオブジェクトに値を追加すると上書きされてしまう

Question

###実現したいこと
jQueryで下記「ini」の先頭に「add」を追加したいです。

// 元のデータ
let ini = '{"data":[{"name":"B","num":2},{"name":"A","num":1}]}';

// 追加したいデータ
let add = '{"name":"C","num":3}';

つまりほしいデータはこちらです。

// ほしいデータ
{"data":[{"name":"C","num":3},{"name":"B","num":2},{"name":"A","num":1}]}

###試したこと
ですが下記だとBの部分が消えて、AとCだけになってしまいました。

// 元のデータ
let ini = '{"data":[{"name":"B","num":2},{"name":"A","num":1}]}';
	ini = JSON.parse( ini );

// 追加したいデータ
let add = '{"name":"C","num":3}';
	add = JSON.parse( add );   

// 下記だとBが消えてしまう    
ini['data'][0] = add;
console.log( ini );

どのようにすれば正しく追加できますでしょうか？

Answer 1

// 元のデータ
let ini = '{"data":[{"name":"B","num":2},{"name":"A","num":1}]}';
    ini = JSON.parse(ini);

// 追加したいデータ
let add = '{"name":"C","num":3}';
    add = JSON.parse(add);

// 「ini」の先頭に「add」を追加
ini.data.concat(ini.data.unshift(add));
console.log(ini);
// => {"data":[{"name":"C","num":3},{"name":"B","num":2},{"name":"A","num":1}]}

Comments

[narutona]

できました。unshift、ありがとうございます。逆にiniからBを削除するにはどうすればいいでしょうか？unshiftの逆のようなものがあったら教えていただけませんでしょうか？

[yasutomi]

unshiftの逆はshiftです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/shift

[narutona]

削除はunshiftの逆というか、concatの逆でしょうか？いずれも初見でよくわかってません…

[narutona]

すみません入れ違いでした。shiftというのがあるのですね。ありがとうございます。大変勉強になりました。

Answer 2

キーが指定されていない配列は0から始まります。
なので、Bが上書きされるのは正しい動作です。

先頭に追加する場合は unshift()
末尾に追加する場合は push()

を使いましょう

Comments

[narutona]

先頭と末尾に適した処理があるのですね。ありがとうございます。すみませんがもしよろしければ「なので」の前をご説明をもう少し詰めていただけませんでしょうか。
どの配列が０から始っていて、なぜBが上書きされるのか、まだイメージできない状態です。

[m.ts10806]

もっと簡単なコードで試すと良いですよ。
let a = ['a','b','c'];
console.log(a[0]);
console.log(a[1]);
console.log(a[2]);

[] 内が配列。
左から0から順番

[narutona]

どうもありがとうございます。いろいろ試してみます。また機会がありましたら宜しくお願い致します。

[m.ts10806]

あれ。詰めるんじゃなかったんでしょうか・・・
たぶんここ曖昧にしておくとオブジェクトも配列もちゃんと扱えるようにはならないと思います。
せめて回答に貼ったドキュメントの見方くらいは覚えてもらいたいのですけど・・・（辞書代わりになりますし）

[narutona]

詰めたいです！笑
「試してごらん」の意図がよくわかっていなかったので、「勝手にがんばれ」かと勘繰って、話を終わらせてしまいました。すみません。
ドキュメントの見方というか、そこにあるpushとshiftの使い方は今回の例に限っていえば掴めました。
どうもありがとうございます。

[narutona]

で、詰めて頂きたいご説明についてですが…

>キーが指定されていない配列は0から始まります。
なので、Bが上書きされるのは正しい動作です。

まず「キーが指定されていない配列」とは、下記のことですよね？

'{"data":[{"name":"B","num":2},{"name":"A","num":1}]}'
の中の
[{"name":"B","num":2},{"name":"A","num":1}]
のこと

そしてこの「Bが0から始まっている（0の位置にBがある）」というのが、「>キーが指定されていない配列は0から始まります」という意味ですよね。

不思議なのは、「>なので、Bが上書きされるのは正しい動作」の部分です。
なぜ「追加」でなく「上書き」になってしまうのでしょうか？

たとえば
var current = {};
current['new'] = "新しい値";
とすると「追加」してくれますよね。

なのにどうして、質問の方は「上書き」になってしまうんだろう。って思ったために「詰めてほしい」とお願いした感じでした。

まぁ「そういうもんだから納得しろ」ですよね。笑

[narutona]

あっいえ、自分で書いてて納得できました。

var current = {};
current['new'] = "新しい値";

で値が追加されるのは、まだnewに値がないからですよね。
もしあれば上書きされるわけですもんね。

すみません。お騒がせしました。

[m.ts10806]

ご自身で書いてますよ。
ini['data'][0] = add;

配列の0番目指定でaddを代入

[narutona]

と、いうことですよね。その書き方の意味がわかっていませんでした。おかげ様でわかりました。どうもありがとうございました。

[m.ts10806]

理解につながったようで何よりです