jsで連想配列オブジェクトの特定keyだけ取り出してカンマ区切りの文字列にする

jsで配列の特定keyだけ取り出してカンマ区切りの文字列にする

言葉だけだと何言ってるの？？ってなるので

表示だけ考えて文字列でカンマ区切りで最後は必要ないってやつ

// これを
const array = [
  {id: 1, category: 'ねこ', name: 'ポチ'},
  {id: 1, category: 'ねこ', name: 'ねこねこ'},
  {id: 1, category: 'いぬ', name: 'にゃん'},
];

// ↓↓↓ こうしたい ↓↓↓
const string = 'ポチ, ねこねこ, にゃん';

結論

function(array) {
   // 配列からnameだけ取り出して「,」区切りの文字列にする
   return array.map( (row) => {return [row['name']]} ).join(',')
},

分解

function(array) {
   // 配列からkeyのnameだけ取り出した配列を作る
   // こんな感じの配列 → ['ポチ', 'ねこねこ', ’にゃん’]
   const namesArray = array.map((row) => {
       return [row['name']]
   });

   // 配列を「,」区切りの文字列にする
   const namesString = nameArray.join(',');
},

Vue.jsで実際に使った時の用途

<template>
  <div>
    <span>
       <!-- 「ねこ, にゃん, ぽち」 のように表示する --!>
      {{ array | convertArrayToString }}
    </span>
  </div>
</template>

<script>
  data: {
    array: array
  },
  filters: {
    convertArrayToString(array) {
      // 配列からnameだけ取り出して「,」区切りの文字列にする
      return array.map( (row) => {return [row['name']]} ).join(',')
    },
  }
</script>