Anatomy of an Algolia Search API Response

Raphael Terrier
InstructorRaphael Terrier
Share this video with your friends

Social Share Links

Send Tweet
Published 6 years ago
Updated 5 years ago

Before playing with Instantsearch widgets and build a rich search experience, the fundamental step is to understand what the library will be dealing with. In this lesson we we’ll cover the anatomy of the JSON search API response send back by Algolia for each search query and how it can be used.

Instructor: [00:00] This is the final state of the project we are going to be building throughout this course. As you can see, it's a simple instant search page containing a variety of widgets.

[00:11] In order to display all that, the instant search library interacts with Algolia servers, sending queries and receiving responses. With each API response comes all the information necessary for instant search to build all those widgets. That's what we'll dig into.

[00:27] To take out what the response looks like, let's open the developer console, click on the network tab, filter on XHR. Then we'll simply perform a query on the website. This is what the API response looks like. It's a simple JSON object containing a dozen attributes referring to the hits, the facets, the query, and some stats.

[00:52] The main one is the hits array. This is what is holding the actual hits that will be displayed on-screen. Here, the setting is set to send 20 hits per page.

[01:02] Let's open the first one. What it contains will obviously depend on how your records are structured and what you've set as retrievable attributes. Here, to name a few, we have a mix of arrays for categories, strings for brand or name, numeric values for popularity, price, and rating, and a Boolean for free shipping.

[01:25] If highlighting is enabling, it is by default. For each results matching the query, we will return the records attribute where it matched in this highlight result object. We will cover highlighting in more details in the following video.

[01:40] If enabled, snippeting works in a similar fashion to retrieve only part of a long text attribute. It is not in this example.

[01:49] Other notable attributes from our API response are number hits, number of page, hits per page, and page. That gives us information about the volume of hits for that query. It is helpful for pagination, for instance. Processing time and number hits are also used for stats.

[02:08] The query attribute refers to the actual text query, whereas params contains the whole query and refinements passed to the engine to retrieve those results. Finally, we have attributes related to facets that are returned for each query as well. These gives us the available facets and some stats. That's pretty much all we need to build a nice search front end.

~ 2 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today