Filtering the Products

I hate to be a whiner, but I am stuck with a weird problem I can't figure out. My products are not being filtered. I keep getting 12 items of different categories.

For example: When I hit the url https://127.0.0.1:8000/api/products?currentCategoryId=/api/categories/2 using the Platform API interface or curl, the data comes back as it should: five items of office furniture (the id of the Office Furniture category in my world being 2 rather than 24). When I click Furniture in the sidebar category, however, I get the 12 unfiltered items.

Doing my Troubleshooting 101, I ask, OK, is currentCategoryId set correctly by Javascript when the page is rendered, or is it null? It is correct. Are the right params being passed in the axios call? Yes. What is the URL we are hitting with this axios call? It is indeed https://127.0.0.1:8000/api/products?currentCategoryId=/api/categories/2 according to the Firefox console. And what data is in the response? The 12 unfiltered items. And that is what is being assigned to this.products in my created() method.

Any ideas?

async created() {
        console.log('"created" is running');
        const params = {};
        if (this.currentCategoryId) {
            params.currentCategoryId = this.currentCategoryId;
        }
        const response = await axios.get('/api/products', { params });
        console.log(`our category id is ${this.currentCategoryId}`); // output: our category id is /api/categories/2
        console.log(params); // output: Object { currentCategoryId: "/api/categories/2" }
        this.products = response.data['hydra:member'];
        console.log(response.data['hydra:member']); // 12 items
    },

    ```

Hey David!

A mystery! Ok, so we know that going to https://127.0.0.1:8000/api/products?currentCategoryId=/api/categories/2 via the (1) API Platform interface works correctly but (2) going to this URL via axios is NOT working correctly. That IS, indeed, super strange. What could be different?

The only thing that immediately came to mind is that the API Platform interface is setting an Accept header on the request - iirc it's application/ld+json. However, I don't think that would make a difference in how the items are filtered... and I think API Platform (via axios) IS returning json ld anyways. So, I don't think this is it.

But something must be different. So here's what I would do:

A) You are already able to get a "curl" command version that DOES do the filtering correctly. Awesome!
B) After making the Ajax request via Axios (where the filtering is incorrect), in your network tools, you should be able to right click on that request and select "copy as curl".

Cool! So now you have 2 similar (but not identical) curl commands: one that works correctly and one that doesn't. Try tweaking each of these until you find what subtle difference is causing the bad behavior. I'd love to know what you find out.

Cheers!

OMFG. You won't -- no I think maybe you will! -- believe this. I was saying
params.currentCategoryId = this.currentCategoryId
and the attentive reader will see there's a wee little mistake there. The name of the parameter should be category. This is what I get for typing like a good person rather than copy-pasting (-: D'oh. So embarrassing, maybe we should delete this little thread.

Thanks for putting me on track to figuring it out!

Hello!

I love this course, great job as always.

I was just wondering if it was considered "best practice" to keep using props to pass an information we're collecting with a service.
The reason why I'm asking is because I was doing this part of the course on my own (for the challenge - and being really psyched about Vue! :p) and I stumbled upon that reflection: should I keep passing this piece of basic information (routing) through props from component to component or should I just call the service directly from the component I'm currently using that information?
My answer was to import the getCurrentCategoryId() method from the page-context service but I'm very interested in knowing your take on this.

Hey Thibaut,

That's a good question, and the answer is (as always) that it depends on your app. If the service method you need to call tends to change or has arguments that are not too easy to get, then it's better just to inject the value as a prop in your component. So, you need to evaluate what option will make your code more resilient to change

Cheers!

Hi!!

I am interested how should look axios get (what is sintax) if we use

https://api-platform.com/do...

How I can get all objects from db on curent date, or how I can get objects beetwen two dates

In my api platform everything is work, but I dont know how to send date (dates) via axios so I can filter result by date or range date.

Hey sasa1007

Have you tried sending your dates as a string? Then in your backend you can read the string and transform it back into a DateTime object

Cheers!

Thank you for your answer.

Uh, I'll try to explain.

I can get string from date object in my vue component and I can try to use it in axios, but I need to send somehow date (string) as parameter so I can get collections of object.

In my api documatacion when I put in entity this line of code

@ApiFilter(DateFilter::class, properties={"created"})

I get this

https://prnt.sc/uagsbt

When i put 02-09-2020 in field created[strictly_after]

my curl is look like this

curl -X GET "http://localhost:8000/api/presences?created%5Bstrictly_after%5D=02-09-2020&page=1"

so my axios call will bi something like this

axios.get('http://localhost:8000/api/presences'.+'?created[strictly_after]'=02-09-2020' ) which I dont like it and I thing that this sintax 'created[strictly_after]' is not going to work, and I hope so that there is a better way to assign a value to the parameters from screenshot via axios.

Best regards

I find some solution

axios.get(this.URL+'?created[after]=2020-05-15')

Hi Sasa, I think you are on the right path. Though I'm not an expert on axios, it seems you have to send that URL in order to get that filter!