【问题标题】:Filtering JSON object in vue to compute new one在 vue 中过滤 JSON 对象以计算新对象
【发布时间】:2020-10-19 11:07:57
【问题描述】:

我有一个来自我的服务器的 JSON 对象,看起来像这样,

    [
   {
      "id":1,
      "tag":"Cooking",
      "weight":null,
      "deleted_at":null,
      "created_at":null,
      "updated_at":null,
      "listings":[
         {
            "id":5,
            "name":"Learn how to make the perfect hotpot with",
            "slug":"learn-how-to-make-the-perfect-hotpot-with",
            "description":"We live in a unique and wonderful time where electric guitars are things that we can rock on. \n\nIn this lesson, I want to be blown away by what you do. And I can reveal my story. And how I went from a woman who had no idea what she was doing to making sounds and songs that felt that they were very honest to me and pushed boundaries that I didn’t even know existed. And I want to try to be a wind in your sails and a steel in your spine as you’re trying to go from being a good guitar player to not just being a great guitar player, but being someone who really finds themselves in their instrument.\n\nI’d like to teach a class that makes your guitar playing meaningful to you. Whatever it is that you want to do in it. If you want to play exactly like me, well, you’re going to figure that out in this lesson. If you want to play guitar playing that feels exactly like you, hopefully, we will - I’ll reveal the building blocks of how you can do that to create an authentic, artistic self on the electric guitar that’s going to be something that is going to give you a lifetime of awesome rockin’.",
            "booking_details":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
            "cost":"25.00",
            "active":1,
            "moderated":1,
            "user_id":3,
            "category_id":null,
            "deleted_at":null,
            "created_at":"2020-06-18T13:41:05.000000Z",
            "updated_at":"2020-06-24T22:50:48.000000Z",
            "tagsList":"Cooking",
            "pivot":{
               "tag_id":1,
               "listing_id":5
            },
            "primary_image":[
               {
                  "id":5,
                  "type":"image",
                  "url":"https://xxxxxxx.s3.eu-west-2.amazonaws.com/learn-how-to-make-the-perfect-hotpot-with/primary-image-lg.jpg",
                  "is_primary":1,
                  "assetable_type":"App\\Listing",
                  "assetable_id":5,
                  "desktop":1,
                  "mobile":null,
                  "user_id":3,
                  "deleted_at":null,
                  "created_at":"2020-06-18T13:41:07.000000Z",
                  "updated_at":"2020-06-18T13:41:07.000000Z"
               },
               {
                  "id":6,
                  "type":"image",
                  "url":"https://xxxxxxx.s3.eu-west-2.amazonaws.com/learn-how-to-make-the-perfect-hotpot-with/primary-image-sm.jpg",
                  "is_primary":1,
                  "assetable_type":"App\\Listing",
                  "assetable_id":5,
                  "desktop":null,
                  "mobile":1,
                  "user_id":3,
                  "deleted_at":null,
                  "created_at":"2020-06-18T13:41:07.000000Z",
                  "updated_at":"2020-06-18T13:41:07.000000Z"
               }
            ],
            "tags":[
               {
                  "id":1,
                  "tag":"Cooking",
                  "weight":null,
                  "deleted_at":null,
                  "created_at":null,
                  "updated_at":null,
                  "pivot":{
                     "listing_id":5,
                     "tag_id":1
                  }
               }
            ]
         }
      ]
   },
   {
      "id":2,
      "tag":"Fitness",
      "weight":null,
      "deleted_at":null,
      "created_at":null,
      "updated_at":null,
      "listings":[
         {
            "id":6,
            "name":"Bodyweight fitness workouts made",
            "slug":"bodyweight-fitness-workouts-made",
            "description":"We live in a unique and wonderful time where electric guitars are things that we can rock on. \n\nIn this lesson, I want to be blown away by what you do. And I can reveal my story. And how I went from a woman who had no idea what she was doing to making sounds and songs that felt that they were very honest to me and pushed boundaries that I didn’t even know existed. And I want to try to be a wind in your sails and a steel in your spine as you’re trying to go from being a good guitar player to not just being a great guitar player, but being someone who really finds themselves in their instrument.\n\nI’d like to teach a class that makes your guitar playing meaningful to you. Whatever it is that you want to do in it. If you want to play exactly like me, well, you’re going to figure that out in this lesson. If you want to play guitar playing that feels exactly like you, hopefully, we will - I’ll reveal the building blocks of how you can do that to create an authentic, artistic self on the electric guitar that’s going to be something that is going to give you a lifetime of awesome rockin’.",
            "booking_details":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
            "cost":"10.00",
            "active":1,
            "moderated":1,
            "user_id":3,
            "category_id":null,
            "deleted_at":null,
            "created_at":"2020-06-18T13:41:49.000000Z",
            "updated_at":"2020-06-18T13:41:49.000000Z",
            "tagsList":"Fitness",
            "pivot":{
               "tag_id":2,
               "listing_id":6
            },
            "primary_image":[
               {
                  "id":7,
                  "type":"image",
                  "url":"https://xxxxxxx.s3.eu-west-2.amazonaws.com/bodyweight-fitness-workouts-made/primary-image-lg.jpg",
                  "is_primary":1,
                  "assetable_type":"App\\Listing",
                  "assetable_id":6,
                  "desktop":1,
                  "mobile":null,
                  "user_id":3,
                  "deleted_at":null,
                  "created_at":"2020-06-18T13:41:50.000000Z",
                  "updated_at":"2020-06-18T13:41:50.000000Z"
               },
               {
                  "id":8,
                  "type":"image",
                  "url":"https://xxxxxxx.s3.eu-west-2.amazonaws.com/bodyweight-fitness-workouts-made/primary-image-sm.jpg",
                  "is_primary":1,
                  "assetable_type":"App\\Listing",
                  "assetable_id":6,
                  "desktop":null,
                  "mobile":1,
                  "user_id":3,
                  "deleted_at":null,
                  "created_at":"2020-06-18T13:41:50.000000Z",
                  "updated_at":"2020-06-18T13:41:50.000000Z"
               }
            ],
            "tags":[
               {
                  "id":2,
                  "tag":"Fitness",
                  "weight":null,
                  "deleted_at":null,
                  "created_at":null,
                  "updated_at":null,
                  "pivot":{
                     "listing_id":6,
                     "tag_id":2
                  }
               }
            ]
         },
         {
            "id":7,
            "name":"Learn how to use TRX bands with",
            "slug":"learn-how-to-use-trx-bands-with",
            "description":"We live in a unique and wonderful time where electric guitars are things that we can rock on. \n\nIn this lesson, I want to be blown away by what you do. And I can reveal my story. And how I went from a woman who had no idea what she was doing to making sounds and songs that felt that they were very honest to me and pushed boundaries that I didn’t even know existed. And I want to try to be a wind in your sails and a steel in your spine as you’re trying to go from being a good guitar player to not just being a great guitar player, but being someone who really finds themselves in their instrument.\n\nI’d like to teach a class that makes your guitar playing meaningful to you. Whatever it is that you want to do in it. If you want to play exactly like me, well, you’re going to figure that out in this lesson. If you want to play guitar playing that feels exactly like you, hopefully, we will - I’ll reveal the building blocks of how you can do that to create an authentic, artistic self on the electric guitar that’s going to be something that is going to give you a lifetime of awesome rockin’.",
            "booking_details":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
            "cost":"10.00",
            "active":1,
            "moderated":1,
            "user_id":3,
            "category_id":null,
            "deleted_at":null,
            "created_at":"2020-06-18T13:42:15.000000Z",
            "updated_at":"2020-06-18T13:42:15.000000Z",
            "tagsList":"Fitness",
            "pivot":{
               "tag_id":2,
               "listing_id":7
            },
            "primary_image":[
               {
                  "id":9,
                  "type":"image",
                  "url":"https://xxxxxxx.s3.eu-west-2.amazonaws.com/learn-how-to-use-trx-bands-with/primary-image-lg.jpg",
                  "is_primary":1,
                  "assetable_type":"App\\Listing",
                  "assetable_id":7,
                  "desktop":1,
                  "mobile":null,
                  "user_id":3,
                  "deleted_at":null,
                  "created_at":"2020-06-18T13:42:16.000000Z",
                  "updated_at":"2020-06-18T13:42:16.000000Z"
               },
               {
                  "id":10,
                  "type":"image",
                  "url":"https://xxxxxxx.s3.eu-west-2.amazonaws.com/learn-how-to-use-trx-bands-with/primary-image-sm.jpg",
                  "is_primary":1,
                  "assetable_type":"App\\Listing",
                  "assetable_id":7,
                  "desktop":null,
                  "mobile":1,
                  "user_id":3,
                  "deleted_at":null,
                  "created_at":"2020-06-18T13:42:16.000000Z",
                  "updated_at":"2020-06-18T13:42:16.000000Z"
               }
            ],
            "tags":[
               {
                  "id":2,
                  "tag":"Fitness",
                  "weight":null,
                  "deleted_at":null,
                  "created_at":null,
                  "updated_at":null,
                  "pivot":{
                     "listing_id":7,
                     "tag_id":2
                  }
               }
            ]
         }
      ]
   },
   {
      "id":3,
      "tag":"Music",
      "weight":null,
      "deleted_at":null,
      "created_at":null,
      "updated_at":null,
      "listings":[
         {
            "id":3,
            "name":"Learn the basics of the guitar  from the anatomy of the  guitar to scales, chords",
            "slug":"learn-the-basics-of-the-guitar-from-the-anatomy-of-the-guitar-to-scales-chords",
            "description":"We live in a unique and wonderful time where electric guitars are things that we can rock on. \n\nIn this lesson, I want to be blown away by what you do. And I can reveal my story. And how I went from a woman who had no idea what she was doing to making sounds and songs that felt that they were very honest to me and pushed boundaries that I didn’t even know existed. And I want to try to be a wind in your sails and a steel in your spine as you’re trying to go from being a good guitar player to not just being a great guitar player, but being someone who really finds themselves in their instrument.\n\nI’d like to teach a class that makes your guitar playing meaningful to you. Whatever it is that you want to do in it. If you want to play exactly like me, well, you’re going to figure that out in this lesson. If you want to play guitar playing that feels exactly like you, hopefully, we will - I’ll reveal the building blocks of how you can do that to create an authentic, artistic self on the electric guitar that’s going to be something that is going to give you a lifetime of awesome rockin’.",
            "booking_details":"undefined",
            "cost":"25.00",
            "active":1,
            "moderated":1,
            "user_id":3,
            "category_id":null,
            "deleted_at":null,
            "created_at":"2020-06-18T13:27:35.000000Z",
            "updated_at":"2020-06-24T10:41:46.000000Z",
            "tagsList":"Music",
            "pivot":{
               "tag_id":3,
               "listing_id":3
            },
            "primary_image":[
               {
                  "id":1,
                  "type":"image",
                  "url":"https://xxxxxxx.s3.eu-west-2.amazonaws.com/learn-the-basics-of-the-guitar-from-the-anatomy-of-the-guitar-to-scales-chords/primary-image-lg.jpg",
                  "is_primary":1,
                  "assetable_type":"App\\Listing",
                  "assetable_id":3,
                  "desktop":1,
                  "mobile":null,
                  "user_id":3,
                  "deleted_at":null,
                  "created_at":"2020-06-18T13:27:36.000000Z",
                  "updated_at":"2020-06-18T13:27:36.000000Z"
               },
               {
                  "id":2,
                  "type":"image",
                  "url":"https://at-home-club-1.s3.eu-west-2.amazonaws.com/learn-the-basics-of-the-guitar-from-the-anatomy-of-the-guitar-to-scales-chords/primary-image-sm.jpg",
                  "is_primary":1,
                  "assetable_type":"App\\Listing",
                  "assetable_id":3,
                  "desktop":null,
                  "mobile":1,
                  "user_id":3,
                  "deleted_at":null,
                  "created_at":"2020-06-18T13:27:37.000000Z",
                  "updated_at":"2020-06-18T13:27:37.000000Z"
               }
            ],
            "tags":[
               {
                  "id":3,
                  "tag":"Music",
                  "weight":null,
                  "deleted_at":null,
                  "created_at":null,
                  "updated_at":null,
                  "pivot":{
                     "listing_id":3,
                     "tag_id":3
                  }
               }
            ]
         },
         {
            "id":8,
            "name":"Advanced guitar skills with William Topa",
            "slug":"advanced-guitar-skills-with-william-topa",
            "description":"We live in a unique and wonderful time where electric guitars are things that we can rock on. \n\nIn this lesson, I want to be blown away by what you do. And I can reveal my story. And how I went from a woman who had no idea what she was doing to making sounds and songs that felt that they were very honest to me and pushed boundaries that I didn’t even know existed. And I want to try to be a wind in your sails and a steel in your spine as you’re trying to go from being a good guitar player to not just being a great guitar player, but being someone who really finds themselves in their instrument.\n\nI’d like to teach a class that makes your guitar playing meaningful to you. Whatever it is that you want to do in it. If you want to play exactly like me, well, you’re going to figure that out in this lesson. If you want to play guitar playing that feels exactly like you, hopefully, we will - I’ll reveal the building blocks of how you can do that to create an authentic, artistic self on the electric guitar that’s going to be something that is going to give you a lifetime of awesome rockin’.",
            "booking_details":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
            "cost":"0.00",
            "active":1,
            "moderated":1,
            "user_id":3,
            "category_id":null,
            "deleted_at":null,
            "created_at":"2020-06-18T13:42:44.000000Z",
            "updated_at":"2020-06-18T13:42:44.000000Z",
            "tagsList":"Music",
            "pivot":{
               "tag_id":3,
               "listing_id":8
            },
            "primary_image":[
               {
                  "id":11,
                  "type":"image",
                  "url":"https://xxxxxxx.s3.eu-west-2.amazonaws.com/advanced-guitar-skills-with-william-topa/primary-image-lg.jpg",
                  "is_primary":1,
                  "assetable_type":"App\\Listing",
                  "assetable_id":8,
                  "desktop":1,
                  "mobile":null,
                  "user_id":3,
                  "deleted_at":null,
                  "created_at":"2020-06-18T13:42:45.000000Z",
                  "updated_at":"2020-06-18T13:42:45.000000Z"
               },
               {
                  "id":12,
                  "type":"image",
                  "url":"https://at-home-club-1.s3.eu-west-2.amazonaws.com/advanced-guitar-skills-with-william-topa/primary-image-sm.jpg",
                  "is_primary":1,
                  "assetable_type":"App\\Listing",
                  "assetable_id":8,
                  "desktop":null,
                  "mobile":1,
                  "user_id":3,
                  "deleted_at":null,
                  "created_at":"2020-06-18T13:42:46.000000Z",
                  "updated_at":"2020-06-18T13:42:46.000000Z"
               }
            ],
            "tags":[
               {
                  "id":3,
                  "tag":"Music",
                  "weight":null,
                  "deleted_at":null,
                  "created_at":null,
                  "updated_at":null,
                  "pivot":{
                     "listing_id":8,
                     "tag_id":3
                  }
               }
            ]
         },
         {
            "id":9,
            "name":"Music production simplified",
            "slug":"music-production-simplified",
            "description":"We live in a unique and wonderful time where electric guitars are things that we can rock on. \n\nIn this lesson, I want to be blown away by what you do. And I can reveal my story. And how I went from a woman who had no idea what she was doing to making sounds and songs that felt that they were very honest to me and pushed boundaries that I didn’t even know existed. And I want to try to be a wind in your sails and a steel in your spine as you’re trying to go from being a good guitar player to not just being a great guitar player, but being someone who really finds themselves in their instrument.\n\nI’d like to teach a class that makes your guitar playing meaningful to you. Whatever it is that you want to do in it. If you want to play exactly like me, well, you’re going to figure that out in this lesson. If you want to play guitar playing that feels exactly like you, hopefully, we will - I’ll reveal the building blocks of how you can do that to create an authentic, artistic self on the electric guitar that’s going to be something that is going to give you a lifetime of awesome rockin’.",
            "booking_details":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
            "cost":"10.00",
            "active":1,
            "moderated":1,
            "user_id":3,
            "category_id":null,
            "deleted_at":null,
            "created_at":"2020-06-18T13:43:15.000000Z",
            "updated_at":"2020-06-18T13:43:15.000000Z",
            "tagsList":"Music",
            "pivot":{
               "tag_id":3,
               "listing_id":9
            },
            "primary_image":[
               {
                  "id":13,
                  "type":"image",
                  "url":"https://xxxxxxx.s3.eu-west-2.amazonaws.com/music-production-simplified/primary-image-lg.jpg",
                  "is_primary":1,
                  "assetable_type":"App\\Listing",
                  "assetable_id":9,
                  "desktop":1,
                  "mobile":null,
                  "user_id":3,
                  "deleted_at":null,
                  "created_at":"2020-06-18T13:43:16.000000Z",
                  "updated_at":"2020-06-18T13:43:16.000000Z"
               },
               {
                  "id":14,
                  "type":"image",
                  "url":"https://at-home-club-1.s3.eu-west-2.amazonaws.com/music-production-simplified/primary-image-sm.jpg",
                  "is_primary":1,
                  "assetable_type":"App\\Listing",
                  "assetable_id":9,
                  "desktop":null,
                  "mobile":1,
                  "user_id":3,
                  "deleted_at":null,
                  "created_at":"2020-06-18T13:43:16.000000Z",
                  "updated_at":"2020-06-18T13:43:16.000000Z"
               }
            ],
            "tags":[
               {
                  "id":3,
                  "tag":"Music",
                  "weight":null,
                  "deleted_at":null,
                  "created_at":null,
                  "updated_at":null,
                  "pivot":{
                     "listing_id":9,
                     "tag_id":3
                  }
               }
            ]
         }
      ]
   }
]

正如您所看到的,每个对象都有列表数组,其中包含多个对象,每个对象都有一个价格属性,我想过滤掉任何价格不为“0.00”的列表对象所以我只能展示那些做但我的尝试不起作用的人,我想知道是不是因为我必须下降一些物体?

这是我的尝试,

filteredListings() {
            return this.tags.filter((listings) => {
                return listings.filter((l) => {
                    console.log(l.cost);
                })

            })
        }

这里的一些帮助会很棒。

【问题讨论】:

    标签: javascript vue.js computed-properties


    【解决方案1】:

    这是我的尝试,我使用了map,在里面你可以申请filter。如果这能解决您的问题,请告诉我:

    givenArray.map(({listings, ...rest})=>{
        listings = listings.filter(p=>Number(p.cost)!==0);
        return {...rest, listings};
    });
    

    【讨论】:

      【解决方案2】:

      试试这个:

      filteredTags() {
          return this.tags.map({ listings, ...rest } => 
              ({ ...rest, listings: listings.filter(listing => listing.cost === '0.00' })
          )
      }
      

      说明: 您要做的是过滤标签,而您想要过滤标签内的列表。因此,您必须首先映射标签并过滤每个标签中的列表。

      【讨论】:

      • 这太棒了,谢谢。是否可以通过 && 或 || 对多个元素进行检查?
      • 当然,你可以在过滤器中添加listing.cost === '0.00' || listing.name === 'test'
      猜你喜欢
      • 2023-01-04
      • 1970-01-01
      • 2021-10-09
      • 1970-01-01
      • 2023-04-09
      • 1970-01-01
      • 2019-10-02
      • 2020-04-20
      • 1970-01-01
      相关资源
      最近更新 更多