Creating a new JSON object in Vue by filtering and computing values

Question

Creating a new JSON object in Vue by filtering and computing values

I have a JSON object coming from my server with the following structure:

    [
   {
      "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. ...awesome rockin’.",
            "booking_details":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore... "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",
            ...
         }
      ]
   },
   ...
]

The objective is to filter out listing objects with a price of "0.00". The current attempt is not yielding desired results, possibly due to navigating through multiple nested objects. Here's the current logic:

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

            })
        }

Any assistance or guidance on refining the filtering process would be greatly appreciated.

javascript vue.js computed-properties

Answer 1

Answer №1

I attempted to solve the problem using a combination of map and nested filter. Please give this code a try and let me know if it addresses your issue:

givenArray.map(({items, ...others})=>{
    items = items.filter(item=>Number(item.price)!==0);
    return {...others, items};
});

Answer 2

I attempted to solve the problem using a combination of map and nested filter. Please give this code a try and let me know if it addresses your issue:

givenArray.map(({items, ...others})=>{
    items = items.filter(item=>Number(item.price)!==0);
    return {...others, items};
});

Answer 3

Answer №2

Give this a shot:

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

Here's the breakdown: Instead of trying to filter the tags directly, focus on filtering the listings within each tag. By using the map function to iterate over each tag and filter its respective listings, you'll achieve the desired outcome.

Answer 4

Give this a shot:

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

Here's the breakdown: Instead of trying to filter the tags directly, focus on filtering the listings within each tag. By using the map function to iterate over each tag and filter its respective listings, you'll achieve the desired outcome.

Creating a new JSON object in Vue by filtering and computing values

Answer №1

Answer №2

Similar questions

How come the deleteOne and findById methods in mongoose are able to function properly even after the document has

A Guide to Displaying HTTP Error Messages on the Angular Login Page

Guide to converting raw Mysql fields into objects using Node.js

Adjusting the transparency of the object's interior

Save the values of mongoose fields in a variable, then iterate through them

Is it possible to alter objects through the use of jQuery.map?

What exactly happens when we use [0] in the expression $("#id")[0]?

I'm struggling to figure out why my code is throwing an Unexpected token error. What am I missing here?

Searching for a way to display just a portion of a rendered HTML page using JavaScript

Loading two scripts in sequence, the first utilizing the "src" attribute while the second is an inline script

Updating cluetip content post webpage loading

The CSS style of the Div element is not being displayed properly when embedded with JavaScript

Having trouble with object initialization in a jQuery GET request?

Prompt user to confirm action with jQuery before proceeding

What is preventing me from creating a perfect circle using the arc() method in Three.js?

Utilizing Mongoose.js to nest a find() query within another find() query

Trouble expanding Bootstrap Dropdown menu on mobile devices

Display the appropriate selection choices based on the knockout condition

achieving outcomes beyond iframe boundaries

Incorporate @aspnet/signalr into your Vue application