質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
多次元配列

1次元配列内にさらに配列を格納している配列を、多次元配列と呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

配列

配列は、各データの要素(値または変数)が連続的に並べられたデータ構造です。各配列は添え字(INDEX)で識別されています。

Q&A

解決済

2回答

23988閲覧

javascriptで二次元の連想配列にデータを追加

aygakusei

総合スコア13

多次元配列

1次元配列内にさらに配列を格納している配列を、多次元配列と呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

配列

配列は、各データの要素(値または変数)が連続的に並べられたデータ構造です。各配列は添え字(INDEX)で識別されています。

0グッド

0クリップ

投稿2019/01/26 20:05

#前提・実現したいこと
javascriptで多次元の連想配列に対して動的にデータを追加したいと考えています.
以下のjavascriptに表現したような配列を動的に作成したいです.
最初が空の二次元連想配列から,コードによって作成される変数を代入していきたいです.
下の例で行くと,data1,somedata,data2などのキーが分かっている一方で"test"や"hoge"に対応する部分は処理後にしか分からずサイズも分からないので,プログラム内で配列を追加したいです.

可能であれば,この連想配列の形を崩さずに実装したいです.

#発生している問題・エラーメッセージ
二次元の連想配列に対してデータを追加してもundefinedと表示されてしまいます.

javascript

1data= [ 2 { 3 data1:"test" , 4 somedata: { 5 a: "hogeA", 6 b: "hogeB" 7 } , 8 data2:"test2" 9 }, 10 { 11 data1:"test3" , 12 somedata: { 13 a: "hogeA2", 14 b: "hogeB2" 15 } , 16 data2:"test4" 17 }, 18 { 19 data1:"test5" , 20 somedata: { 21 a: "hogeA3", 22 b: "hogeB3" 23 } , 24 data2:"test6" 25 } 26];

#試したこと
.pushを試してみましたが,undefinedとなってしまいました.

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2019/01/27 01:23

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。
aygakusei

2019/01/27 08:04

ご指摘頂きありがとうございます. 後ほど修正させていただきます.
guest

回答2

0

ベストアンサー

二次元の連想配列に対してデータを追加してもundefinedと表示されてしまいます

JavaScript(以下JS)に連想配列なんてありませんけど?

というわけで解説。
これはPHPを普段メインに使っており、JSをサブで扱っているエンジニアに陥りがちなミスです。


PHPとJSの違いとは?

PHPはどんな形式で配列を作っても内部的にはハッシュマップを使った連想配列という扱いになります。
(PHP7では速度を稼ぐ為に裏で本物の配列を用意するようになりましたが、PHP5.6までは全てハッシュマップの連想配列ですし、表面上は7になっても全て連想配列です)

JSには配列オブジェクトの2つが存在します。
この配列とオブジェクトにFirefox作ってる団体が管理しているMDNというサイトのリンクを張りましたのでそちらを確認してほしいのですが、所持しているプロパティやメソッドが全くと言って良いほど違うことがわかります。

因みに[1, 2, 3].push(value)みたいな感じで使うメソッドは、
Array.prototype.pushという風にJSのプロトタイプ拡張という機能を使って実装されたメソッドを指します。


JavaScript

1data= [ 2 { 3 data1:"test" , 4 somedata: { 5 a: "hogeA", 6 b: "hogeB" 7 } , 8 data2:"test2" 9 } 10] 11data[0].somedata.push("hogeC"); 12// VM78:1 Uncaught TypeError: data[0].somedata.push is not a function 13// at <anonymous>:1:18

JSではこれをオブジェクトの配列と呼びます。
あくまで配列自体は一次元。
そこからハッシュマップ的な使い方をしているオブジェクトを並べていると表現します。

somedataに値を追加しようとpushメソッドを実行しましたが、「お前は関数じゃないだろ」エラーが出てしまいました。
これはsomedataはキーと値のセットを表現するためにオブジェクトで作りましたが、
配列とは違ってpushメソッドがないことから生じるエラーになっています。


オブジェクトへのキーの追加は代入式で行います。
配列もそれで出来ますが、配列は末尾に追加するならpushを使った方が自然でしょう。

JavaScript

1data= [ 2 { 3 data1:"test" , 4 somedata: { 5 a: "hogeA", 6 b: "hogeB" 7 } , 8 data2:"test2" 9 } 10] 11 12data[0].somedata.c = "hogeC"; 13// プロパティに変数名や可変文字列でアクセスしたいなら[]を使う 14data[0].somedata["d"] = "hogeD"; 15 16console.log(data); 17// [ 18// { 19// "data1": "test", 20// "somedata": { 21// "a": "hogeA", 22// "b": "hogeB", 23// "c": "hogeC", 24// "d": "hogeD" 25// }, 26// "data2": "test2" 27// } 28// ]

投稿2019/01/27 02:41

miyabi-sun

総合スコア21158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

aygakusei

2019/01/27 08:10

回答いただきありがとうございます. アクセスの仕方(data[0].somedata.c = "hogeC";)は連想配列に似ているが,あくまでもオブジェクトを扱っているため連想配列ではないという認識で合っていますか? また,私の質問の仕方が悪かったため補足させていただきます. hogeCやhogeDを追記したいのではなく以下のような配列に対して ```javascript data= [ { data1:"test" , somedata: { a: "hogeA", b: "hogeB" } , data2:"test2" } } ``` 以下のデータを変数から追加したいと考えています. ```javascript { data1:"test3" , somedata: { a: "hogeA2", b: "hogeB2" } , data2:"test4" } ``` つまり,data[0]までしか定義していない状態で,data[1]やdata[2]にdata[0]と同様のキーと値の関係でデータを格納したいです.
aygakusei

2019/02/01 03:55

ありがとうございます.先に連想配列を定義してからpushをすることで実装できました.
guest

0

下記引用に対する回答

まさかこういう意味ではないと思うが、dataにpushしてエラーになると思えない。

javascript

1const data= [ 2 { 3 data1:"test" , 4 somedata: { 5 a: "hogeA", 6 b: "hogeB" 7 } , 8 data2:"test2" 9 }, 10] 11const next = { 12 data1:"test3" , 13 somedata: { 14 a: "hogeA2", 15 b: "hogeB2" 16 } , 17 data2:"test4" 18} 19data.push(next); 20console.log(data);

また、キーが分かっているならそういうクラスを定義しておいて、newするときにコンストラクタ引数を渡すとか考えたほうがよさそう(somedataみたいなのがいなければ、Object.assignでいいのだが)

--- 以下引用

また,私の質問の仕方が悪かったため補足させていただきます.

hogeCやhogeDを追記したいのではなく以下のような配列に対して

javascript

1data= [ 2{ 3data1:"test" , 4somedata: { 5a: "hogeA", 6b: "hogeB" 7} , 8data2:"test2" 9} 10}

以下のデータを変数から追加したいと考えています.

javascript

1{ 2data1:"test3" , 3somedata: { 4a: "hogeA2", 5b: "hogeB2" 6} , 7data2:"test4" 8}

つまり,data[0]までしか定義していない状態で,data[1]やdata[2]にdata[0]と同様のキーと値の関係でデータを格納したいです.

投稿2019/01/28 03:18

papinianus

総合スコア12705

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問