オブジェクト内の特定のキーを含む配列を更新したい。

Question

オブジェクト内に特定のキーを含む配列を更新したいです。

例えば、下記のような talkData というオブジェクトがあるとして、その "id": 6 のある配列の "checkedin" の値を true に変えたい、といった場合です。

let talkData = [
  {
    "id": 7,
    "checkedin": false
  },
  {
    "id": 6,
    "checkedin": false // ここを true に変えたい
  },
  {
    "id": 5,
    "checkedin": false
  },
  {
    "id": 4,
    "checkedin": true
  },
  {
    "id": 3,
    "checkedin": false
  },
  {
    "id": 2,
    "checkedin": false
  },
  {
    "id": 1,
    "checkedin": true
  }
]

試していることとしては、下記のように filter で id による絞り込みを行って push するなどを行いました。

let currentData = talkData.filter(function(el){
  return el.id == 6
})

currentData[0].checkedin = true
talkData.push(currentData[0])

// console.log(talkData)

ただ、この場合ですと、

• 更新前の "id": 6 のある配列が残ってしまっている
• 更新後のデータを挿入する場所が最後になってしまう

といった問題があります。（できれば新しくデータを入れる変数を用意せず直接的に）対象の値を更新できる方法をご教示いただきたいですm(_ _)m

Answer 1

IEを切り捨てれば(あるいはPolyfill使えば)、もっと簡単に書けます。

talkData.find(function(value) { return value.id === 6; }).checkedin = true;

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/find

Comments

[Bonito_Bonito]

ありがとうございますm(_ _)m

Answer 2

更新前の "id": 6 のある配列が残ってしまっている

それは質問者さんの勘違いです。
オブジェクトや配列は全て参照の値渡しなので、
currentData[0].checkedin = trueの行の時点でtalkData[1]も引きずられて更新されているはずです。

従ってその使い方なら後続のpushの行は不要です。
でも、letを使い始めてるってことはES2015が使える環境なんですかね？
だったら1要素を探すならfilterではなくfindの方が手軽ですし、コールバック関数はアロー関数で書いて…
こんな感じでいかが？

talkData
  .find(el => el.id == 6)
  .checkedin = true;

ただまぁ、これだと要素が見つからない場合にエラーになるので、
or演算子でくくってこんな感じにするのがより実践的ですかね。

(talkData.find(el => el.id == 6) || {})
  .checkedin = true;

Comments

[Bonito_Bonito]

ありがとうございますm(_ _)m
>currentData[0].checkedin = trueの行の時点でtalkData[1]も引きずられて更新されているはずです。
なるほど…知らなかったです、dice142様の言われているところが腑に落ちました！

提案いただいた記述はスマートで分かりやすいですね！
babelでトランスパイルしていますので、filter()ではなくfindで書き直してみようかなと思いますm(_ _)m

[miyabi-sun]

まぁ、この仕様のせいで逆に切り離したい時にひと手間必要で困るんですけどね。
ディープコピーはJSerの永遠の課題ですが、シャローコピーでよければスプレッド演算子で簡単に出来ますので、使い方を確認してみて下さいね。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax

Answer 3

currentData[0].checkedin = true

これで既に元のデータがtrueに変更されていませんか？
直後にconsole.log(talkData)で確認してみてください。

なので、

talkData.push(currentData[0])

は不要かなと思いますが。

Comments

[Bonito_Bonito]

あ、本当ですね…ありがとうございますm(_ _)m

「currentData」というのを新たに作って、その値を更新しているだけなので「talkData」は変わらないだろうと思っておりました。（少し不思議に感じてしまいます）

[dice142]

詳細はmiyabi-sun様が説明してくださっているので、そちらを参考に考えてみるとよろしいかと思います。

[Bonito_Bonito]

腑に落ちました！
ありがとうございますm(_ _)mとても勉強になりました！

Answer 4

javascriptは基本的に変数の代入は参照渡しなので
filterをしたものに処理をかければ元の配列にも反映されます。

talkData.filter(function(el){
  return el.id == 6;
})[0].checkedin=true;
console.log(talkData);

Comments

[Bonito_Bonito]

ありがとうございます。。
>filterをしたものに処理をかければ元の配列にも反映される
これまで知らなかったので新たに変数用意したりしていました（恥）