Iterate over my relationship

Hello

I am trying to iterate over my relationship. I have Topics and Subtopics which are loaded with Topics, so a Topic record in my Topic index contains also the subtopics. What I am trying is to iterate over the relationship but without success.

My Code

<ais-state-results>
         <template slot-scope="{ query, hits }">
             <ais-hits v-if="hits.length > 0">
               <div slot-scope="{ items }">
                 <div v-for="item in items" :key="item.objectID">
                   <h3 class="mb-2 font-weight-bold"><ais-highlight attribute="title" :hit="item"/></h3>
                   <div class="d-md-flex flex-wrap mb-3">
                     <a class="d-md-flex col-md-6 p-0 text-decoration-none" :href="'/subtopic/' + item.slug">
                       <div class="pr-3">
                         <h3 class="h6 mb-1 blue font-weight-bold"><ais-highlight attribute="title" :hit="item" /><span v-if="newSubtopic(item.created_at_unix)" class="badge badge-primary ml-1 align-top">New</span></h3>
                         <p class="text-height-125"><ais-highlight attribute="description" :hit="item" /></p>
                       </div>
                     </a>
                   </div>
                 </div>
               </div>
             </ais-hits>
             <h3 class="h6" v-else>
               Es tut uns leid, wir konnten keine Ergebnisse fĂĽr deine Eingabe <strong>{{ query }}</strong> finden.
             </h3>
         </template>
       </ais-state-results>

Maybe someone could help me here :slight_smile:

No one can help? Is it clear what I mean?

EDIT:

Tried it like so now, but I want the subtopics to disappear on search and not the topics.

<ais-state-results>
          <template slot-scope="{ query, hits }">
             <ais-hits v-if="hits.length > 0">
               <div slot-scope="{ items }">
                 <div v-for="item in items">
                   <!-- <h3 class="mb-2"><strong><ais-highlight attribute="title" :hit="item"/></strong></h3> -->
                     <div v-if="item.subtopics.length" class="d-md-flex flex-wrap mb-3">
                       <a v-for="(subtopic, index) in item.subtopics" :key="subtopic.objectID" class="d-md-flex col-md-6 p-0 text-decoration-none" :href="'/subtopic/'+ subtopic.slug">
                         <div class="pr-3">
                           <h3 class="h6 mb-1 blue"><strong><ais-highlight :attribute="`subtopics.${index}.title`" :hit="item" /></strong></h3>
                           <p class="text-height-125"><ais-highlight :attribute="`subtopics.${index}.description`" :hit="item" /></p>
                         </div>
                       </a>
                     </div>
                     <h3 class="h6 mb-3" v-else>
                       Es werden bald Themen zur verfĂĽgung stehen.
                     </h3>
                 </div>
               </div>
             </ais-hits>
             <h3 class="h6" v-else>
               Es tut uns leid, wir konnten keine Ergebnisse fĂĽr deine Eingabe <strong>{{ query }}</strong> finden.
             </h3>
         </template>
       </ais-state-results>

EDIT: Added a Sandbox example. So when you type in “Kurvendiskussion” I want the result “Grenzwert” to disappear.

Hi there!

From what I’m seeing of your CodeSandbox, it seems like you have the right approach and what you’re wanting to do works. All subtopics are properly displayed.

However, you can’t hide the “Grenzwert” subtopic without some additional logic, because it’s part of the record that Algolia returns for the query “Kurvendiskussion”, not a separate result.

If you want to consider subtopics as separate results, I recommend indexing them as separate records, and retains an identifier for their main topic so you can display it and de-duplicate by main topic using the distinct feature.

So, instead of organizing records like this:

[
  {
    "name": "My topic",
    "subtopics": [
      {
        "name": "My first subtopic"
      },
      {
        "name": "My second subtopic"
      }
    ]
  }
]

You’d organize them like this:

[
  {
    "name": "My first subtopic",
    "main": "My topic"
  },
  {
    "name": "My second subtopic",
    "main": "My topic"
  }
]

And you’d de-duplicate on the main attribute to only show one record per topic.

Best,

1 Like