連想配列の要素の一部を書換えたいです

Question

dataで渡ってくる連想配列のclassificationの要素を
dictで定義している日本語に書換えたいです。

例)classification: "lll"←エルエルに書換えたいです
参考サイトを真似したのですが、上手くいかず
どなたかアドバイス頂けると幸いです。

参考にしたサイト：
ローマ字表記の都道府県を日本語に変換したい

var dict = [
  {lll: "エルエル", count:"2" , color:"#4474E2"},
  {xxx: "エックス", count: 2 , color: "#4474E2"},
  {sss: "エスエス", count: 2 , color: "#4474E2"}
];
var data = [
{classification: "lll",count: 2,color: ""},
{classification: 'xxx', count: 1, color: ''},
{classification: 'sss', count: 2, color: ''}
];

var newData = [];
for (i=0;i<data.length;i++) {
  var elem = data[i];
  console.log('elem.data',elem);
  var newElem = Object.assign(
    {},
    elem,
    { classification: dict[elem.classification] }
  );
  newData.push(newElem);
}
console.log(newData);

console.log結果

[{
  classification: undefined,　←期待値　classification:エルエル
  color: "",
  count: 2
}, {
  classification: undefined,　←期待値　classification:エックス
  color: "",
  count: 1
}, {
  classification: undefined,　←期待値　classification:エスエス
  color: "",
  count: 2
}]

Answer 1

ご質問にあるコードをほぼ活かすべく最低限の修正でやるならば、dictから以下のような dict2

  var dict = [
    { lll: "エルエル", count: 2, color: "#4474E2" },
    { xxx: "エックス", count: 2, color: "#4474E2" },
    { sss: "エスエス", count: 2, color: "#4474E2" }
  ];

+ var dict2 = Object.assign({}, ...dict);

を作っておき、newDataの要素を作るところで、elem.classificationをキーとしてその日本語を引いてくるときのマップとしてこのdict2を使えばよいです。

var newData = [];
for (i=0;i<data.length;i++) {
  var elem = data[i];
  console.log('elem.data',elem);
  var newElem = Object.assign(
    {},
    elem,
-   { classification: dict[elem.classification] }
+   { classification: dict2[elem.classification] }
  );
  newData.push(newElem);
}
console.log(newData);

なお、上記によるdict2 には Object.assign({}, ...dict) によって、dictの最後の要素が持つ、count と color も残ります。その点が気になるのであれば、

var dict2 = Object.assign({}, ...dict);

+ delete dict2.count;
+ delete dict2.color;

として、両プロパティを消せばよいでしょう。

???? サンプル @codepen

別案

map と find および分割代入を使って、こんなのでもいけますよ。

var newData = data.map(({ classification: key, count, color }) => ({
  classification: dict.find(e => key in e)[key],
  count,
  color
}));

???? サンプル#2 @codepen

追記

コメントからの

ちなみにdictのcolorも上書きしたかった

についてですが、つまり colorもdict の該当要素の color の値が反映されるようにしたい、ということでしょうか？
その場合、こうします。

(1) dictからdict2を作る案

???? サンプル#3 @codepen

dict2 の作り方を変えて、dict2 が以下になるようにしています。

{
   lll: {
      classification: "エルエル",
      color: "#4474E2"
   },
   xxx:{
      classification: "エックス",
      color: "#000000"
   },
   sss: {
      classification: "エスエス",
      color: "#FFFFFF"
   }
}

こうすることで、var newElemを作るときの Object.assign()の引数に与える３番目のオブジェクトは、dict2[elem.classification]
になります。

(2) map を使う案

map　を使う方も対応させてみました。

???? サンプル#4 @codepen

なお、上記（１）、(2)のサンプルコードでは、newDataの要素のcountプロパティだけが、元の配列dataの要素のcountプロパティの値が引き継がれることを確認しやすくするため、

• data要素のcountを、11, 22, 33 に
• dict要素のcolorを、#4474E2, #000000, #FFFFFF　に

しています。

Comments

[anzi1230]

ご丁寧にご回答頂き、ありがとうございます！！分割代入の方法もありがとうございます
ちなみにdictのcolorも上書きしたかったのですが、(ご説明足らずすみません）
{ color: dict2[elem.color] },をやってみましたが、colorがundifinedになってしまいました。
この方法では難しいでしょうか？

[退会済みユーザー]

コメントありがとうございます。回答に追記しました。

[anzi1230]

とても勉強になりました！！！ありがとうございましたm(__)m

Answer 2

どなたかアドバイス頂けると幸いです。

dictはふつうの配列なので、番号でアクセスします。dict[elem.classification]と参照しても、ご提示のようにundefinedしか取れません。