How to create handlbars HTML template using Nested Dictionary Data

Question

I am trying to assemble an HTML email containing Application Alerts that the user subscribed to. There are 2 Categories: "Services" and "Requests".

Each category is a Dictionary with dynamic Application names. Each Application Name will also be a dictionary with dynamic alert types. Those alert types will be the array that contains the alert message and timestamp.

I have tried using the lookup keyMap examples I have found online with no luck.

The End Result I am hoping will look something like this:

HTML TABLE

I have a fiddle setup with the data: FIDDLE

JSON

{
  "Requests": {
    "Division Map Layers": {
      "Upvotes": [
        {
          "createdAt": "2023-05-08T22:12:35.500Z",
          "alert_message": "Rudy Sanchez upvoted"
        }
      ],
      "Tagged Users": [
        {
          "createdAt": "2023-05-08T22:12:44.211Z",
          "alert_message": "Rudy Sanchez tagged a user: Shawn Anderson"
        },
        {
          "createdAt": "2023-05-08T22:12:53.947Z",
          "alert_message": "Rudy Sanchez tagged a user: Jesse Brown"
        }
      ],
      "Products": [
        {
          "createdAt": "2023-05-08T22:13:05.908Z",
          "alert_message": "Rudy Sanchez added a product: Product 2"
        }
      ]
    },
    "ShutInTasks Tree": {
      "Tagged Users": [
        {
          "createdAt": "2023-05-08T22:13:25.232Z",
          "alert_message": "Rudy Sanchez tagged a user: Carol Evans-Danver"
        },
        {
          "createdAt": "2023-05-08T22:13:42.864Z",
          "alert_message": "Rudy Sanchez removed a tagged user: Carol Evans-Danver"
        }
      ]
    }
  },
  "Services": {
    "Map Services": {
      "Metadata": [
        {
          "createdAt": "2023-05-08T22:08:23.370Z",
          "alert_message": "Rudy Sanchez updated metadata"
        }
      ],
      "Messages": [
        {
          "createdAt": "2023-05-08T22:12:15.914Z",
          "alert_message": "Rudy Sanchez created a message: Testing first message"
        },
        {
          "createdAt": "2023-05-08T22:14:00.856Z",
          "alert_message": "Rudy Sanchez reacted to Rudy Sanchez's message: Testing first message"
        }
      ]
    },
    "iCompressor": {
      "CoSponsors": [
        {
          "createdAt": "2023-05-08T22:11:41.169Z",
          "alert_message": "Rudy Sanchez cosponsored"
        }
      ],
      "Timeline": [
        {
          "createdAt": "2023-05-08T22:11:51.192Z",
          "alert_message": "Rudy Sanchez created a timeline: Q1-2023"
        },
        {
          "createdAt": "2023-05-08T22:11:59.421Z",
          "alert_message": "Rudy Sanchez created a timeline: Q3-2023"
        }
      ]
    }
  }
}

I can restructure the data if it makes it easier. I have a different fiddle in which I am trying something different. It works except I can't figure out how to put multiple Alert Categories under the same Application. I can show only a single one" "Metadata", "Messages", etc...

Different Data Structure

What is keyPairs? Please post your expected HTML rather than share a link. — 76484
– 76484, Commented May 9, 2023 at 2:48

76484 · Accepted Answer · 2023-05-09 09:43:44Z

It can certainly be done with the data structure you have, you would just need to make use of the @key data-variable to get the names of the categories, applications and alert types because they are all object keys in your data structure. There is no need to do any lookups because at each level we use the @key as the heading and then iterate over the object at each key. When we get to the array of alerts, we iterate over it and print the alert_message and createdAt values into our table cells.

const template = Handlebars.compile(document.getElementById('Template').innerHTML);

const data = {
  "Requests": {
    "Division Map Layers": {
      "Upvotes": [
        {
          "createdAt": "2023-05-08T22:12:35.500Z",
          "alert_message": "Rudy Sanchez upvoted"
        }
      ],
      "Tagged Users": [
        {
          "createdAt": "2023-05-08T22:12:44.211Z",
          "alert_message": "Rudy Sanchez tagged a user: Shawn Anderson"
        },
        {
          "createdAt": "2023-05-08T22:12:53.947Z",
          "alert_message": "Rudy Sanchez tagged a user: Jesse Brown"
        }
      ],
      "Products": [
        {
          "createdAt": "2023-05-08T22:13:05.908Z",
          "alert_message": "Rudy Sanchez added a product: Product 2"
        }
      ]
    },
    "ShutInTasks Tree": {
      "Tagged Users": [
        {
          "createdAt": "2023-05-08T22:13:25.232Z",
          "alert_message": "Rudy Sanchez tagged a user: Carol Evans-Danver"
        },
        {
          "createdAt": "2023-05-08T22:13:42.864Z",
          "alert_message": "Rudy Sanchez removed a tagged user: Carol Evans-Danver"
        }
      ]
    }
  },
  "Services": {
    "Map Services": {
      "Metadata": [
        {
          "createdAt": "2023-05-08T22:08:23.370Z",
          "alert_message": "Rudy Sanchez updated metadata"
        }
      ],
      "Messages": [
        {
          "createdAt": "2023-05-08T22:12:15.914Z",
          "alert_message": "Rudy Sanchez created a message: Testing first message"
        },
        {
          "createdAt": "2023-05-08T22:14:00.856Z",
          "alert_message": "Rudy Sanchez reacted to Rudy Sanchez's message: Testing first message"
        }
      ]
    },
    "iCompressor": {
      "CoSponsors": [
        {
          "createdAt": "2023-05-08T22:11:41.169Z",
          "alert_message": "Rudy Sanchez cosponsored"
        }
      ],
      "Timeline": [
        {
          "createdAt": "2023-05-08T22:11:51.192Z",
          "alert_message": "Rudy Sanchez created a timeline: Q1-2023"
        },
        {
          "createdAt": "2023-05-08T22:11:59.421Z",
          "alert_message": "Rudy Sanchez created a timeline: Q3-2023"
        }
      ]
    }
  }
};

const output = template(data);

document.body.innerHTML = output;

.mega-menu {
  border: 1px solid aquamarine;
  padding: 8px;
  font-family: sans-serif;
}
.main {
  font-size: 24px;
  font-weight: bold;
  color: red;
  margin-bottom: 16px;
}
.app-div {
  margin-left: 20px;
}
.app-name {
  font-size: 18px;
  font-weight: bold;
  color: blue;
  margin-bottom: 8px;
}
.alert-name {
  font-size: 16px;
  font-weight: bold;
  color: green;
  margin-bottom: 4px;
}
table {
  width: 100%;
  margin-bottom: 8px;
}

table,
th,
td {
  border: 1px solid lightgrey;
  border-collapse: collapse;
}

th,
td {
  padding: 2px 4px;
}

th {
  font-size: 12px;
  text-align: left;
  color: grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"></script>
<script id="Template" type="text/template">
<div class="mega-menu">
  {{#each this}}
    <div>
      <div class="main">{{@key}}</div>
      {{#each this}}
        <div class="app-div">
          <div class="app-name">{{@key}}</div>
            {{#each this}}
              <div class="alert-name">{{@key}}</div>
              <div class="app-div">
                <table>
                  <thead>
                    <tr>
                      <th style="width: 600px">Message</th>
                      <th style="width: 100px">Date</th>
                    </tr>
                  </thead>
                  <tbody>
                    {{#each this}}
                      <tr>
                        <td>{{alert_message}}</td>
                        <td>{{createdAt}}</td>
                      </tr>
                    {{/each}}
                  </tbody>
                </table>
              </div>
            {{/each}}
          </div>
        {{/each}}
      </div>
    {{/each}}
  </div>
</script>

I have created a fork of your fiddle for reference.

Collectives™ on Stack Overflow

How to create handlbars HTML template using Nested Dictionary Data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related