jQueryで連想配列の中からvalueを取り出す方法

Question

前提・実現したいこと

jbuilderで生成された、このような配列(categories)の中から値を取り出し、

var categories = [{id: 1, name: "哺乳類"},{id: 2, name: "爬虫類"}];

最終的にはテンプレートリテラルの中で以下のように出力し、活用したいと思っています。

`<p class="work__info__category">
    カテゴリー：
    ${"ここに、「哺乳類、爬虫類」と並べて表示"}
    </p>`

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

こちらのコードで、「哺乳類」「爬虫類」それぞれの名前を取得することはできたのですが、一気に並べることができていません。

var name = categories[0].name;
=> 哺乳類

試したこと

こちらのソースコードは試しました。

categories.each(function(cat, i){
  console.log(cat[i].name);
  });

// エラーメッセージ
Uncaught TypeError: Cannot read property 'name' of undefined

console.log(cat[i].name);の部分をconsole.log(cat[0].name);など、具体的な数字にして試したりもしましたが、やはりnameがundefinedとなってしまいます。

この辺りの記事も読んだのですが、うまい方法が見つけられませんでした。

▼読んだ記事
【JavaScript入門】連想配列(Dictionary)の取得/追加/ソートまとめ
JavaScript 連想配列の仕組みと使い方のサンプル

良い書き方がありましたら教えていただけますとうれしいです。

Answer 1

var categories = [{id: 1, name: "哺乳類"},{id: 2, name: "爬虫類"}];
var res = categories.map( v=> v.name ).join( ',' );
console.log( res );

【Array.prototype.map() - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map

【Array.prototype.join() - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/join

Comments

[kei344]

あ、「、」か。

[miyabi_pudding]

ですね。
回答丸かぶりしてすみません　笑

[okutamatanuki]

丁寧に解説もつけてくださってありがとうございます！勉強します！！

Answer 2

console.log(cat[i].name);の部分をconsole.log(cat[0].name);など、具体的な数字にして試したりもしましたが

微妙に間違えています。eachではなくforEachですし、中身はcat.nameもしくはcategories[i].nameとなります。

Comments

[okutamatanuki]

ありがとうございます！いただいたコードもこの後ためしてみます！！

Answer 3

`<p class="work__info__category">
  カテゴリー：
  ${
    categories.map(v => v.name).join('、')
  }
</p>`

Comments

[okutamatanuki]

ありがとうございます！望む情報がシンプルに得られました！この後コードを研究させていただきます！

[miyabi_pudding]

kei344さんの回答に、参考文献が載せられておりますので、
関数がどんな値を返しているのか、を重点的に研究されるとよいかと。
メソッドチェーンは、シンプルな書き方の代表格ですが、使うためには、関数が何を返しているかを、しっかり理解する必要があります。