Displaying Related Data in Handlebars Cards Based on a Common ID

[aprendizlaura]

I have an issue, and I'm looking for some guidance. My goal is to create a visualization using Handlebars because I want to display different cards. Initially, my data was related by a specific column. I have a column with an ID that repeats across different rows, and the data in each row belongs to the same category. In my visualization, I want to show the data for each unique ID on separate cards, but I’m unsure how to structure the Handlebars template since I haven’t found a way to iterate by ID.

My initial approach was to transform the data into JSON format, where each ID would have key-value pairs, but I'm struggling to use that JSON. Even though it appears as JSON format in Superset, it’s actually shown as a string when visualized.

Any suggestions on how to handle this?

Summary: Objective: For each unique ID, I want to create two cards—one for category A and another for category B—and display all associated data (which exists across different rows).

[dosubot[bot]]

To achieve your goal of displaying related data in Handlebars cards based on a common ID, you can follow these steps:

1. Transform Data into JSON Objects: First, ensure that your data is properly transformed into JSON objects. If your data is currently in a stringified JSON format, you can use a Handlebars helper to parse it. Unfortunately, I couldn't find a specific helper in the Superset codebase for parsing stringified JSON, but you can create a custom helper to do this.

2. Group Data by ID: Before passing the data to the Handlebars template, group your data by the common ID. This can be done in your data processing logic, where you create a structure that maps each unique ID to its associated data.

3. Handlebars Template Structure: Use a Handlebars template to iterate over the grouped data. Here's a basic example of how you might structure your template:

   {{#each groupedData}}
     <div class="card">
       <h3>ID: {{@key}}</h3>
       <div class="category-a">
         <h4>Category A</h4>
         {{#each this.categoryA}}
           <p>{{this}}</p>
         {{/each}}
       </div>
       <div class="category-b">
         <h4>Category B</h4>
         {{#each this.categoryB}}
           <p>{{this}}</p>
         {{/each}}
       </div>
     </div>
   {{/each}}

   In this template, groupedData is an object where each key is a unique ID, and the value is an object containing arrays for categoryA and categoryB.

4. Pass Data to Handlebars: Ensure that the grouped data structure is passed to the Handlebars template. This involves preparing your data in the correct format before rendering it with Handlebars.

By following these steps, you should be able to create a visualization that displays data in cards based on a common ID. If you need to create a custom Handlebars helper for parsing JSON, you can refer to the existing helpers in the Superset codebase as a guide ^[1].

To continue talking to Dosu, mention @dosu.