多次元配列から指定キーの配列を取得したい

Question

前提・実現したいこと

JavaScript、jQueryで、多次元配列から指定キーの配列を取得したいです。
宜しくお願い致します。

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

「試したこと」にあるように、JavaScriptとjQueryと試した結果、以下のエラーとなります。

まずJavaScriptの方ではundefinedです。

undefined

そしてjQueryの場合のエラーは、日付の指定がわからずこちらです。

v['d{4}/d{2}'] is undefined

該当のソースコード

元になる配列です。
おおまかには、「月の下にidとuxが並ぶ」という構造です。
これを一番下の配列ごとに取得し、それぞれ「hoo()」をかけたいと思っています。

var array = {
  "postA":{
    "2019/05":[
    	{"id":1,"ux":a},
    	{"id":2,"ux":b}
    ],
    "2019/04":[
    	{"id":3,"ux":c}
    ]
  },
  "postB":{
    "2019/05":[
    	{"id":4,"ux":d},
    	{"id":5,"ux":e}
    ]
  }
};

function hoo(data){
	$('body').append('<p>'+data['id']+'</p>と<p>'+data['ux']+'</p>');
}

試したこと

以下、エラーの出るコートです。

まずJavaScriptでforを使ってみたのですが、上のように「undefined」となってしまいます。

for (let key in array) {
  for (let k in key) {
    const data = {
        id: k.id,
        ux: k.ux
    };
    hoo(data);
  }
}	

続いてjQueryのeachを使ってみたものの、不確定な日付をどう指定すればいいかわからず、正規表現を使ってみましたが上のエラーになってしまいました。

$.each(array, function(i, v) {
	const data = {
		  id: v['\d{4}/d{2}']['id'],
		  ux: v['\d{4}/d{2}']['ux']	
	};
	hoo(data);
});

補足情報（FW/ツールのバージョンなど）

「hoo()」がかかった状態として最終的に想定している出力は次のものです。
よろしければこの出力にすべく正しいソースコードをご教授願えませんでしょうか。

<p>1とa</p>
<p>2とb</p>
<p>3とc</p>
<p>4とd</p>
<p>5とe</p>

Answer 1

var array = {
  "postA":{
    "2019/05":[
        {"id":1,"ux":"a"},
        {"id":2,"ux":"b"}
    ],
    "2019/04":[
        {"id":3,"ux":"c"}
    ]
  },
  "postB":{
    "2019/05":[
        {"id":4,"ux":"d"},
        {"id":5,"ux":"e"}
    ]
  }
};

Object.keys(array).reduce((a,c)=>a.concat(Object.keys(array[c]).flatMap(e=>array[c][e])),[]).forEach(hoo);

Comments

[papinianus]

そうか、一旦目的の配列を作る必要ないですよね

[yambejp]

IEを想定するならObject.valuesよりkeysの方が選択肢としては正しいです

[narutona]

申し訳ございません。確認が遅くなりました。
みなさん複雑でちょっとついていけなかったです。階層が多いいとこんなになるんですね。
ありがとうございました。こちらのソースコードもじっくり拝読させて頂きたいと思います。

[papinianus]

複雑ってことですが何なら複雑じゃないのでしょうか。
使える構文を縛ってください。それで書きますので。

[papinianus]

ieは考えてないです。flatMapとか無理そうですし。

[narutona]

お気遣いありがとうございます。構文を縛るとしても「何で縛ると可能なのか」などがわからず。たとえるならマグロの釣り方を知りたいときに「どの釣り竿ならわかるの？」と聞かれ、「どの釣り竿ならマグロが釣れるのかわからない」といった感じです（笑）
さらに現状としては結局自分の環境で実装できず、何がいけないのか再考していたりもするので、しばしお時間いただければと思います。

Answer 2

オブジェクトにarrayという変数名をつけるのは紛らわしいので
やめたほうがよいでしょう

<script>
$(function(){
  var obj = {
    "postA":{
      "2019/05":[
        {"id":1,"ux":"a"},
        {"id":2,"ux":"b"},
        ],
      "2019/04":[
        {"id":3,"ux":"c"},
        ],
    },
    "postB":{
      "2019/05":[
        {"id":4,"ux":"d"},
        {"id":5,"ux":"e"},
        ],
    },
  };
  Object.values(obj).forEach(x=>{
    Object.values(x).forEach(y=>{
      y.forEach(data=>{
        $('body').append('<p>'+data.id+'と'+data['ux']+'</p>');
      });
    });
  });
});
</script>

hooにわたす

hooに渡しても直に書いても同じです。
なお命題のhooはpタグが別れていて仕様がおかしいです
（pが別れていると補足情報のサンプルのようにはならない）

$(function(){
  var obj = {
    "postA":{
      "2019/05":[
        {"id":1,"ux":"a"},
        {"id":2,"ux":"b"},
        ],
      "2019/04":[
        {"id":3,"ux":"c"},
        ],
    },
    "postB":{
      "2019/05":[
        {"id":4,"ux":"d"},
        {"id":5,"ux":"e"},
        ],
    },
  };
  Object.values(obj).forEach(x=>{
    Object.values(x).forEach(y=>{
      y.forEach(data=>{
        hoo(data);
      });
    });
  });
});
function hoo(data){
    $('body').append('<p>'+data['id']+'と'+data['ux']+'</p>');
}

蛇足

  $.each(obj,(...x)=>{
    $.each(x[1],(...y)=>{
      y[1].forEach(hoo);
    });
  });

Comments

[narutona]

まず名称についてありがとうございます。連想配列とは、配列ではなくオブジェクト（？）なのでしょうか？
また、大っ変申し訳ございませんが、あくまで「hoo()」を使った流れで考えております。つまり「const data」にそれぞれの値を配列として入れておき、それを「hoo()」に渡す。という過程を経て実現したいと考えておりました。素人的な思考でしょうし恐れ多いのですが。
とはいえ大変勉強になる書き方に感謝申し上げます。

[yambejp]

> 連想配列とは、配列ではなくオブジェクト

javascriptに連想配列という考え方はありません。
配列ではないのでデータアクセスの仕方が変わってきます
（forでやるならinで受ける）

[narutona]

失礼致しました。初めて見る形式でしたので応用を利かせられませんで、たびたびお手間おかけしました。無事実装できました。ご回答いただきありがとうございました。

[narutona]

> javascriptに連想配列という考え方はありません。

お恥ずかしながらまったく知りませんでした。ありがとうございます。よく調べておきます。

[papinianus]

さすがに、forEach(data=>{hoo(data);})はforEach(hoo)で良いのではないでしょうか?

[yambejp]

ああ、なるほどそうですね

[narutona]

お世話になっております。
蛇足は質問のレベルに降りてきてくださった感じでしょうか？
教えて頂きたいのですが「...x」「...y」とはなんでしょうか？

[yambejp]

var obj = ’・・・’
という文字列になっているのでだめです
仮にシングルクォートをとったとしても
uxに指定しているa~eが変数として機能するのでおかしいです
文字列リテラルとして捉えられるようにダブルクォートで囲んでください

それも含めて私の回答のvar objのような書き方でお願いします

[narutona]

再度までありがとうございます！jsfiddleご覧になってくださったんですね。失礼かと思って消してしましました。なるほどシングルクオートのせいでオブジェクトではなくなっていたわけですか。ありがとうございました。

Answer 3

narutona様の習熟度に合わせてfor文のみで回答してみます。

元のコードの問題点は2箇所あります。

1. for in で書くと、連想配列(オブジェクト)のキーを取得するだけなので、array[key]で値を取り出さないといけない。
2. arrayの中身が3重構造になっているので、for文がもうひとつ必要。

arrayの3重目は通常の配列なので、for of が使えます(連想配列(オブジェクト)では使えない)。for in とは違い、値を直接取り出せるのでこちらを使うとよいです。

修正したコードは下の通りになります。

for (let id in array) {
  for (let month in array[id]) {
    for (let post of array[id][month]) {
      const data = {
        id: post.id,
        ux: post.ux
      };
      hoo(data);
    }
  }
}

Comments

[narutona]

ざっと調べただけでは私のケースに完璧にあったご説明というのがなく、いつも半端な理解のままでした。頂戴したご説明のおかげでこれまで不明瞭だったいくつかの点がつながり目の前がすっきり晴れた気分です。どうもありがとうございます。感謝申し上げます。