How do I parse JSON from Algolia into search results?

Database & APIs

Hi folks!

So it turns out implementing search in Flutterflow is very frustrating.

I started with Simple Search, which it turns out is not search, it's just filtering a list that's pre-loaded onto the page based on text. So it was very easy to see results when I had 10 items returned. And as soon as I crossed 300 search results, this completely broke because it was trying to load every single result before running a search, and the app would time out.

Ok then, FF has an Algolia integration that should work, right? But no, if you use the in-built integration to query Algolia, you can't paginate, apply filters, or do basically anything with it.

Ok then, John Higgins, FF's Global Head of Education has a tutorial on how to integrate Algolia. Surely that will provide me a low-code solution for completing this integration.

Well, sort of. I think it's safe to say, the term "low code" no longer applies in this implementation. You fully have to write the code to query Algolia, do some pubspec dependency weirdness, and juggle the data from action output to app state to results.

Has anyone successfully implemented Algolia search into your FF app? Should I just ignore all these tutorials and pretend there's no integration and treat it like any other random API?

What have you tried so far?

Attempted to implement:

  • Simple Search

  • In-built Algolia Integration

  • John Higgins' Tutorial on Algolia in Flutterflow

I've successfully gotten search results from Algolia, and stored them in the action output. But no matter how I try, I can't get them to store in my app state variable.

Details on that:

  • I've set up an Algolia index and data is successfully populating there from my Firestore database.

  • I've created a Data Schema in FF for jsonJob that has all the same fields as an individual search result that will be returned from my Algolia index.

  • I've created an App State value (actionRes) that stores a list of jsonJobs.

  • On page load, I'm running a custom action to query Algolia. I can see in the debug panel that the action output (res) has the correct data from Algolia (an array of json objects).

  • I've tried several ways to get that data into my actionRes app state variable, and none have worked. I even tried it being just a string so that I can worry about parsing it later, no dice. My current attempt is to set the value of actionRes to unique list items in res, so:

    • Taking the action output res

    • To Data Type

    • that data type being jsonJob

    • Is List

    • Unique List Items

    • Unique Key -> a hash value returned in the data that is unique for each item

But that doesn't work (the data is still in res but never gets to actionRes, let alone the search results that I want to populate based on that app state value).

All of this and I'm just trying to get the initial results to load. I haven't even started hooking up the search query or adding filters or implementing pagination—all of which I want to do.

Help!!

Did you check FlutterFlow's Documentation for this topic?
Yes
1
2 replies