Nuxt.jsで、外部の.jsonファイルのデータを取り込み、filterで整形したものを表示したい

Question

やりたい事

以下の.jsonファイルから、categoryがcssのものだけを取り込み、表示させたい。

{
  "article":[
    {"category":"js","date":"01/02/2020","id":1},
    {"category":"css","date":"01/02/2020","id":2},
    {"category":"js","date":"01/03/2020","id":3},
    {"category":"css","date":"01/04/2020","id":4},

  ]
}

困っていること

表示の仕方はわかるのですが、jsonデータに対するfilterの使い方が分かりません。
①jsonデータをimportする。　◯
②持ってきたjsonデータを整形 ❌
③整形したデータをreturnして、computedのShapingをv-forでまわす
(考え方はわかっていると思う)◯

<!-- 表示させるコード  -->
   <ul v-for="data in Shaping" :key="data.id">
       <li>{{data.date}},{{data.category}},{data.id}</li>
   </ul>
....
import articleData from "~/assets/json/article-data.json"
   
   data(){
     return {
      json_data:articleData.article
    }
   computed: {
    Shaping(){
      let list = this.json_data;
      list = list.filter(function (value,index){
        return value[index].category == "css";
      })
      return list;   }
  }
 }
}

このコードの結果、Cannot read property 'category' of undefined
というエラーが出てしまいます。

文法的な問題で、調べれば解決できるだろうと思われるかもしれませんが、
申し訳ありません。解決できず困っております。
お手数おかけして申し訳ないのですが、教えていただけないでしょうか
よろしくお願いいたします。

Answer 1

filterのcallbackの第一引数には配列の現在の要素が入ってきます
なのでこの場合indexは不要です

list = list.filter(function(value) {
    return value.category == "css";
});

Document

Comments

[ff7575]

CaptainRTA様のご回答のおかげで、やりたいことが実現できました。
本当にありがとうございました。