ループ処理中に新しく配列を作りたい（全ての配列の内容が最後の値に上書きされる）

Question

前提・実現したいこと

ループ処理中に新しく配列作成をしたいのですが、どうやっても最後の配列の値で構成された配列になってしまいます。
理想の結果の内容になるためにはどうしたらいいかアドバイスをお願いします。

該当のソースコード

const kanas = [
  {name: 'ま', id: 'ma'},
  {name: 'み', id: 'mi'}
]
const kanaRooms = [
  {label: '', owner_id: '', admin_id: 2},
  {label: '', owner_id: '', admin_id: 3}
]

const  moge = []

kanas.forEach(function(val) {
  console.log('val:' + JSON.stringify(val))
   const r = Array.from(kanaRooms)
   console.log('r:' + JSON.stringify(r))
	r.forEach(function(val2) {
      const insert = val2
      insert.label = val.name
      insert.owner_id = val.id
      moge.push(insert)
	})
})
console.log(moge)

上記の結果

> "val:{"name":"ま","id":"ma"}"
> "r:[{"label":"","owner_id":"","admin_id":2},{"label":"","owner_id":"","admin_id":3}]"
> "val:{"name":"み","id":"mi"}"
> "r:[{"label":"ま","owner_id":"ma","admin_id":2},{"label":"ま","owner_id":"ma","admin_id":3}]"
> Array [Object { label: "み", owner_id: "mi", admin_id: 2 }, Object { label: "み", owner_id: "mi", admin_id: 3 }, Object { label: "み", owner_id: "mi", admin_id: 2 }, Object { label: "み", owner_id: "mi", admin_id: 3 }]

理想の結果

> "val:{"name":"ま","id":"ma"}"
> "r:[{"label":"","owner_id":"","admin_id":2},{"label":"","owner_id":"","admin_id":3}]"
> "val:{"name":"み","id":"mi"}"
> "r:[{"label":"ま","owner_id":"ma","admin_id":2},{"label":"ま","owner_id":"ma","admin_id":3}]"
> Array [Object { label: "ま", owner_id: "ma", admin_id: 2 }, Object { label: "ま", owner_id: "ma", admin_id: 3 }, Object { label: "み", owner_id: "mi", admin_id: 2 }, Object { label: "み", owner_id: "mi", admin_id: 3 }]

Answer 1

JavaScriptに於ける配列・オブジェクトは参照の値渡しで、
メモリ空間上に実体があり、それをこちょこちょ操作する感じになるので
しっかりコピーを取りつつ作業していかなければなりません。

値を受けるという目的の為にforEachを利用するのは非推奨で、
mapを使いつつ引数への束縛を利用して値をかき集めつつ、
新しいオブジェクトを作って新配列へ投げ込むという手法が良いでしょう。

下記のコードはkanasを起点にkanas.mapを行い、
その中で更にkanaRooms.mapを行って二次元配列を作りました。
最終的には一次元配列で欲しいので.reduce((arr, it) => [...arr, ...it])というイディオムで1次元配列に固め直して完了です。

まぁまぁ綺麗に仕上がったと思います。

const kanas = [
  {name: 'ま', id: 'ma'},
  {name: 'み', id: 'mi'}
]
const kanaRooms = [
  {label: '', owner_id: '', admin_id: 2},
  {label: '', owner_id: '', admin_id: 3}
]

const moge = kanas.map(
  ({name: label, id: owner_id}) => kanaRooms.map(
    ({admin_id}) => ({label, owner_id, admin_id})
  )
).reduce((arr, it) => [...arr, ...it])

console.log(JSON.stringify(moge, null, 2))

結果

[
  {
    "label": "ま",
    "owner_id": "ma",
    "admin_id": 2
  },
  {
    "label": "ま",
    "owner_id": "ma",
    "admin_id": 3
  },
  {
    "label": "み",
    "owner_id": "mi",
    "admin_id": 2
  },
  {
    "label": "み",
    "owner_id": "mi",
    "admin_id": 3
  }
]

Answer 2

こんなかんじでしょうか？

Comments

[yambejp]

const moge = []
kanas.forEach(function(val) {
kanaRooms.forEach(function(val2) {
var label = val.name;
var owner_id = val.id;
var admin_id = val2.admin_id;
var insert={label,owner_id,admin_id};
moge.push(insert);
});
});
console.log(moge)
</script>

Answer 3

const insert = val2はコピーではないので、その後のinsert.label = val.nameなどが元のオブジェクトにも影響してしまいます。

const insert = {...val2};のようにオブジェクトを再作成する方法が考えられます。

Answer 4

JavaScriptのreduceメソッドを使うと、シンプルに書けてわかりやすいかなと思いました。
Array.prototype.reduce() - JavaScript _ MDN

const kanas = [
  {name: 'ま', id: 'ma'},
  {name: 'み', id: 'mi'}
]

const moge = kanas.reduce((res, kana) => {
   res.push(
    { label: kana.name, owner_id: kana.id, admin_id: 2 },
    { label: kana.name, owner_id: kana.id, admin_id: 3 }
  )
  return res
}, [])

console.log(moge);

=>
[
  {label: "ま", owner_id: "ma", admin_id: 2},
  {label: "ま", owner_id: "ma", admin_id: 3},
  {label: "み", owner_id: "mi", admin_id: 2},
  {label: "み", owner_id: "mi", admin_id: 3},
]

サンプルコード

Answer 5

こんにちは

参考までに、一案挙げておきます。

はじめに、配列kanasの要素 kana と、配列kanaRoomsの要素 room　とをマージした、ひとつの新しいオブジェクトを返す、以下のような関数を作っておくと見通しがよくなると思います。

const merge = (kana, room) => (
  { ...room, label: kana.name, owner_id: kana.id }
)

上記を使って、以下によって、目的とする配列が得られます。

const moge = kanas.map(k => kanaRooms.map(r => merge(k, r))).flat()

• **動作確認用CodePen: **https://codepen.io/jun68ykt/pen/bGdpyvY?editors=0012