【Javascript】複数の配列を連想配列に格納する。

Question

前提・実現したいこと

複数の配列があります。
const id = [1, 2, 3, 4];
const name = ['A', 'B', 'C', 'A'];
const address = ['a', 'b', 'c', 'a'];
上記配列をループを使って連想配列として以下のように格納したいです。
const arr = [
{id:1, name:'A', address:'a'},
{id:2, name:'B', address:'b'},
{id:3, name:'C', address:'c'},
{id:4, name:'A', address:'a'}
];

発生している問題・エラーメッセージ

以下のようにコードを書いてみましたが配列の最後の値のみ表示され、思ったとおりにいきません。
初心者で基礎的なことだと思いますが、何卒ご教授よろしくお願いします。

const id = [1, 2, 3, 4];
const name = ['A', 'B', 'C', 'A'];
const address = ['a', 'b', 'c', 'a'];
const arr = new Array();

for(let i=0; i<id.length; i++){
arr.id = id[i];
arr.name = name[i];
arr.address = address[i];
}
console.log(arr);

```出力結果``````````````````
{id:4, name:'A', address:'a'}

Answer 1

こんにちは

for ループの中を以下のように修正します。

- arr.id = id[i];
- arr.name = name[i];
- arr.address = address[i];
+ arr.push({ id: id[i], name: name[i], address: address[i] });

• 動作確認用サンプル: https://codepen.io/jun68ykt/pen/GRZjoYK

追記

配列やオブジェクトの操作で便利なライブラリ lodash の _.zipWith を使うと、以下のように書けます。

const ids = [1, 2, 3, 4];
const names = ['A', 'B', 'C', 'A'];
const addresses = ['a', 'b', 'c', 'a'];

const arr = _.zipWith(ids, names, addresses, (id, name, address) => ({ id, name, address }));

• 動作確認用サンプル: https://codepen.io/jun68ykt/pen/yLOaeQX

Comments

[masaki120]

jun68ykt 様
ご回答ありがとうございます。
ご指摘の通り修正しましたら思う通りの結果が通りました。
追記事項も勉強しておきます。ありがとうございました！

[jun68ykt]

どういたしまして。
> 思う通りの結果が通りました。
とのことでよかったです ????

Answer 2

ご質問のコードに関しては jun68ykt さんが 差分（Diff）回答されていますので、補足です。

配列の最後の値のみ表示され

表示されているのは 配列要素を持たない（配列長）Arrayのインスタンス arr です。
forループの中では、以下の処理になっています。

1. arrに配列要素を追加することなく、
2. id, name, address のプロパティを付与し
3. これらのプロパティの値を書き換える

---

MDN Array#push

var a = ["foo", "baa", "baz"];
a.a = １;
a.b = "a";
a.c = "A";
console.log( a )
// => (3) ["foo", "baa", "baz", a: 1, b: "a", c: "A"]
//    ===  -------------------  ~~~~~~~~~~~~~~~~~~~~
//    ^      ^                  ^
//    配列長  配列要素    インスタンスに保持させたプロパティ
// （chrome)

ユーザが追加したプロパティは、開発者コンソールで prop : val と表示されます。

Answer 3

const arr = id.map((x,y)=>({id:x,name:name[y],address:address[y]}));

Comments

[masaki120]

yambejp 様
ご回答ありがとうございます。
こちらのコードで求めていた表示ができました。
mapメソッドは使ったことがなかったので、この機会に勉強してみます。
ありがとうございました！