Filter API by its Key - json

Question

Heys guys have some JSON data and API trying to figure out what the API would be to filter its category, currently only have 'food and items'. here the data.
{
"id": 1587428052314,
"_id": "5e9e5599a3f3e540e9c6553c",
"Title": "Home Cleaning Sanitiser Box",
"Description": "This box has everything you need - right now!"
"Phone": "021881821921",
"Category": "food"
}
Here is api: localhost:4000/api/user-listing/
Could I filter it somehow within my .then of promise chain?
Axios.get("localhost:4000/api/user-listing")
.then((res) => {
// in here ?? this.setState({ listings: res.data });
});
Cheers

Answer 1

There are multiple ways to do this as you expected. If you expect that one endpoint should exist to retrieve all the data with "Category": "food" there is nothing you can do about it with frontend tools (actually there are a couple of ways but they ain't come from backend anymore).
Problem illustration
So we suppose when we call localhost:4000/api/user-listing/ we will receive an array of objects which includes multiple objects with "Category": "food", then we suppose we have retrieved the following data from the above endpoint.
[{
"id": 1,
"_id": "5e9e5599a3f3e540e9c6553c-1",
"Title": "coke",
"Description": "This box has everything you need - right now!",
"Phone": "021881821921",
"Category": "drink"
},
{
"id": 2,
"_id": "5e9e5599a3f3e540e9c6553c-2",
"Title": "salmon",
"Description": "This box has everything you need - right now!",
"Phone": "021881821921",
"Category": "food"
},
{
"id": 3,
"_id": "5e9e5599a3f3e540e9c6553c-3",
"Title": "soda",
"Description": "This box has everything you need - right now!",
"Phone": "021881821921",
"Category": "drink"
},
{
"id": 4,
"_id": "5e9e5599a3f3e540e9c6553c-4",
"Title": "rice",
"Description": "This box has everything you need - right now!",
"Phone": "021881821921",
"Category": "food"
}
]
NOTE: I just made this example array of data for more illustration. You should replace it with your res.data in your code.
Filtering data
To get all the data with "Category": "food" we can simply do the following:
const arrayOfData = [{
"id": 1,
"_id": "5e9e5599a3f3e540e9c6553c-1",
"Title": "coke",
"Description": "This box has everything you need - right now!",
"Phone": "021881821921",
"Category": "drink"
},
{
"id": 2,
"_id": "5e9e5599a3f3e540e9c6553c-2",
"Title": "salmon",
"Description": "This box has everything you need - right now!",
"Phone": "021881821921",
"Category": "food"
},
{
"id": 3,
"_id": "5e9e5599a3f3e540e9c6553c-3",
"Title": "soda",
"Description": "This box has everything you need - right now!",
"Phone": "021881821921",
"Category": "drink"
},
{
"id": 4,
"_id": "5e9e5599a3f3e540e9c6553c-4",
"Title": "rice",
"Description": "This box has everything you need - right now!",
"Phone": "021881821921",
"Category": "food"
}
]
const newArray = arrayOfData.filter(data => data.Category === "food")
console.log(newArray)
UPDATE
So as you update the question if you want to deal with your data in .then it will be something like this:
Axios.get("localhost:4000/api/user-listing")
.then((res) => {
this.setState({
listing: res.data.filter(data => data.Category === "food")
})
});