First post here, so sorry if I'm not asking correctly.

I'm building a MERN app with axios & redux, and am trying to implement search/filter functionality. I have my search service function written and am trying to get back the filtered results, but only get an empty array. Here's my function:

const searchBottles = async (token, query) => {
const config = {
    headers: {
        Authorization: `Bearer ${token}`
    }
}

try {
    const response = await axios.get(API_URL, config)
    const responseArray = [response.data]
    const filteredResponseArray = responseArray.filter(bottle => bottle.includes(`${query}`))

    return filteredResponseArray.data
} catch (error) {
    console.log("SEARCH BOTTLES SERVICE ERROR: ", error)
}}

I'm getting my data in responseArray, but when I try to apply the filter it comes back as an empty array. Here's an example of responseArray:

[
[
    {
        "_id": "6349c7d0899618f8161dd92c",
        "user": "6338a3e15ec211d9c6487b64",
        "producer": "joseph phelps",
        "vintage": 2002,
        "wineName": "insignia",
        "variety": "cabernet blend",
        "region": "napa valley",
        "quantity": 11,
        "notes": "beautiful",
        "location": "a1",
        "createdAt": "2022-10-14T20:34:24.821Z",
        "updatedAt": "2022-10-19T04:57:21.815Z",
        "__v": 0
    },
    {
        "_id": "634a4d87f19291db76902693",
        "user": "6338a3e15ec211d9c6487b64",
        "producer": "Quilceda Creek",
        "vintage": 2005,
        "wineName": "cabernet",
        "variety": "Cabernet Sauvignon",
        "region": "Washington",
        "quantity": 22,
        "notes": "100 Points Wine Advocate",
        "location": "11",
        "createdAt": "2022-10-15T06:04:55.391Z",
        "updatedAt": "2022-10-18T06:35:17.648Z",
        "__v": 0
    },
    {
        "_id": "634a4da7f19291db7690269a",
        "user": "6338a3e15ec211d9c6487b64",
        "producer": "Leonetti Cellar",
        "vintage": 2005,
        "wineName": "cabernet",
        "variety": "Cabernet Sauvignon",
        "region": "Washington",
        "quantity": 9,
        "notes": "100 Points Wine Advocate",
        "location": "99",
        "createdAt": "2022-10-15T06:05:27.544Z",
        "updatedAt": "2022-10-18T06:35:04.248Z",
        "__v": 0
    },
    {
        "_id": "634e41c56555f76c4a6dbbee",
        "user": "6338a3e15ec211d9c6487b64",
        "producer": "chateau latour",
        "vintage": 1961,
        "wineName": "grand vin",
        "variety": "cabernet blend",
        "region": "pauillac",
        "quantity": 12,
        "notes": "a perfect wine",
        "location": "a9",
        "createdAt": "2022-10-18T06:03:49.974Z",
        "updatedAt": "2022-10-18T06:35:06.217Z",
        "__v": 0
    },
    {
        "_id": "634f7ad4805a9d487079d9f8",
        "user": "6338a3e15ec211d9c6487b64",
        "producer": "Au Bon Climat",
        "vintage": 2020,
        "wineName": "Les Dessus",
        "variety": "Pinot Noir",
        "region": "Santa Barbara",
        "quantity": 12,
        "notes": "cherry cola",
        "location": "B10",
        "createdAt": "2022-10-19T04:19:32.135Z",
        "updatedAt": "2022-10-19T04:19:32.135Z",
        "__v": 0
    }
]]

Any help is appreciated; thank you!

CodePudding user response：

Problem with your code is that you are putting your response data into another Array, instead of accessing it and filtering it.

Meaning what you are trying to filter is just a single entry (which is an array as well) and not your actual response. Also you are trying to check an Object for include check, which won't work either.

 const responseArray = [response.data]
 const filteredResponseArray = responseArray.filter(bottle => bottle.includes(`${query}`))

 return filteredResponseArray.data

// Above should be updated to

return (response.data || []).filter()

As for your filtering logic, if you want it to be looked into all of the values you have inside the object, then shorted would be to write down as below,

// For partial string searchability
(response.data || []).filter(bottle => Object.values(bottle).toString().includes(query));

// For complete match in any value
(response.data || []).filter(bottle => Object.values(bottle).includes(query));